Styling fixes for new rendering approach (#28)

Author: devchas

dynamic-sdui-app/mcp-server/server.py

@@ -275,13 +275,11 @@ def generate_dynamic_sdui_app() -> str:
           * *Example:* `chatService = inject(ChatService);`
       * **CRITICAL RULE 5 (Chat Service):** For any buttons or links related to search, discovery, or navigation (e.g., "View Details", "Explore"), you **must** import `ChatService` from `../../../chat/chat.service` and call `this.chatService.addUserPrompt()` with an appropriate instructional prompt.
       * **CRITICAL RULE 6 (Action Buttons):** For buttons that imply a stateful action (e.g., "Add to Cart", "Add to Wishlist"), simply log a message to the console (e.g., `console.log('Add to cart clicked')`).
-      * **CRITICAL RULE 7 (Image Loading):** When using `<img>` tags, you **must** show a spinner if the `src` is `undefined` or `''`. Import `MatProgressSpinnerModule` (from `@angular/material/progress-spinner`) in the standalone component and use this structure:
+      * **CRITICAL RULE 7 (Image Loading):** When using `<img>` tags, you **must** not show the image if `src` is `undefined` or `''`. Use this structure:
           * *Example:*
             ```html
             @if (imageUrl()) {
               <img [src]="imageUrl()">
-            } @else {
-              <mat-spinner diameter="50"></mat-spinner>
             }
             ```
 4.  **Generate `app-context.ts`:**
@@ -571,16 +569,14 @@ def create_dynamic_component() -> str:
      * *Example:* chatService = inject(ChatService);  
    * **CRITICAL RULE 5 (Chat Service):** For any buttons or links related to search, discovery, or navigation (e.g., "View Details", "Explore"), you **must** import ChatService from ../../../chat/chat.service and call this.chatService.addUserPrompt() with an appropriate instructional prompt.  
    * **CRITICAL RULE 6 (Action Buttons):** For buttons that imply a stateful action (e.g., "Add to Cart", "Add to Wishlist"), simply log a message to the console (e.g., console.log('Add to cart clicked')).  
-   * **CRITICAL RULE 7 (Image Loading):** When using <img> tags, you **must** show a spinner if the src is undefined or ''. Import MatProgressSpinnerModule (from @angular/material/progress-spinner) in the standalone component and use this structure:  
+      * **CRITICAL RULE 7 (Image Loading):** When using `<img>` tags, you **must** not show the image if `src` is `undefined` or `''`. Use this structure:
      * *Example:*  
      * HTML
 
 ```
 
 @if (imageUrl()) {
   <img [src]="imageUrl()">
-} @else {
-  <mat-spinner diameter="50"></mat-spinner>
 }
 
 ```

dynamic-sdui-app/src/app/apps/adev-docs/components/code-snippet.component.ts

@@ -6,27 +6,31 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import { Component, input } from '@angular/core';
+import { Component, inject, input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Highlight } from 'ngx-highlightjs';
 import { MatIconModule } from '@angular/material/icon';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MagicAiService } from '../../../magic-ai/magic-ai.service';
 
 @Component({
   selector: 'adev-code-snippet',
   standalone: true,
-  imports: [CommonModule, Highlight, MatIconModule, MatProgressBarModule],
-  template: `@if (code() && language()) {
+  imports: [CommonModule, Highlight, MatIconModule],
+  template: `
+
+@if (!code() || !language() || !this.magicAiService.isStreamComplete()) {
+  <div class="code-snippet-container">
+    <div class="placeholder-loading">
+      <p>Loading...</p>
+    </div>
+  </div>
+} @else {
   <div class="code-snippet-container">
     <pre><code [highlight]="code()!" [language]="language()!"></code></pre>
     <button class="copy-button" (click)="copyCode()">
       <mat-icon>content_copy</mat-icon>
     </button>
   </div>
-} @else {
-  <div class="code-snippet-container">
-    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
-  </div>
 }`,
   styles: [`.code-snippet-container {
   position: relative;
@@ -63,10 +67,23 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
 code {
   border: var(--adev-docs-border-default);
   border-radius: var(--adev-docs-border-radius-md);
+  margin: 10px 0;
+}
+
+.placeholder-loading {
+  background-color: #282c34;
+  min-height: 30px;
+  color: #abb2bf;
+  border: var(--adev-docs-border-default);
+  border-radius: var(--adev-docs-border-radius-md);
+  padding: 16px;
+  font-family: var(--default-mono-font-family);
+  margin: 10px 0;
 }
 `],
 })
 export class CodeSnippetComponent {
+  magicAiService = inject(MagicAiService);
   code = input<string | undefined>();
   language = input<string | undefined>();
 

dynamic-sdui-app/src/app/apps/magic-bookstore/app-context.ts

@@ -15,7 +15,6 @@ import { FullReviewCardComponent } from './components/full-review-card.component
 import { GenreTagCloudComponent } from './components/genre-tag-cloud.component';
 import { BookSpecificationsComponent } from './components/book-specifications.component';
 import { AwardBadgeComponent } from './components/award-badge.component';
-import { BestsellerRibbonComponent } from './components/bestseller-ribbon.component';
 import { SeriesInfoCardComponent } from './components/series-info-card.component';
 import { BookDescriptionPanelComponent } from './components/book-description-panel.component';
 import { StockAvailabilityComponent } from './components/stock-availability.component';
@@ -88,14 +87,6 @@ const GENERATED_COMPONENT_CONTEXT_DATA: ComponentContext[] = [
       award: { type: 'Award', description: "The award object to display.", required: true },
     },
   },
-  {
-    name: 'BestsellerRibbonComponent',
-    description: "Visually indicates a book's bestseller rank.",
-    type: 'dynamicComponent',
-    inputs: {
-      rank: { type: 'number', description: "The bestseller rank of the book.", required: true },
-    },
-  },
   {
     name: 'SeriesInfoCardComponent',
     description: "Displays information about the book's series.",
@@ -141,7 +132,6 @@ const GENERATED_COMPONENT_MAP: { [key: string]: Type<any> } = {
   GenreTagCloudComponent: GenreTagCloudComponent,
   BookSpecificationsComponent: BookSpecificationsComponent,
   AwardBadgeComponent: AwardBadgeComponent,
-  BestsellerRibbonComponent: BestsellerRibbonComponent,
   SeriesInfoCardComponent: SeriesInfoCardComponent,
   BookDescriptionPanelComponent: BookDescriptionPanelComponent,
   StockAvailabilityComponent: StockAvailabilityComponent,

dynamic-sdui-app/src/app/apps/magic-bookstore/components/author-bio-card.component.ts

@@ -8,20 +8,19 @@
 
 import { Component, input } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { Author } from '../data-store';
 
 @Component({
   selector: 'app-author-bio-card',
   standalone: true,
-  imports: [CommonModule, MatProgressSpinnerModule],
+  imports: [CommonModule],
   template: `@if (author(); as author) {
   <div class="author-card">
     <div class="author-image-container">
       @if (author.imageUrl) {
         <img [src]="author.imageUrl" alt="Photo of {{ author.name }}" class="author-image">
       } @else {
-        <mat-spinner diameter="50"></mat-spinner>
+        <div class="author-initials">{{ getInitials(author.name) }}</div>
       }
     </div>
     <div class="author-info">
@@ -60,8 +59,10 @@ import { Author } from '../data-store';
   object-fit: cover;
 }
 
-mat-spinner {
-  --mdc-circular-progress-active-indicator-color: var(--primary);
+.author-initials {
+  font-size: 48px;
+  font-weight: bold;
+  color: var(--primary);
 }
 
 .author-info {
@@ -87,4 +88,15 @@ mat-spinner {
 })
 export class AuthorBioCardComponent {
   author = input<Author>();
+
+  getInitials(name: string): string {
+    if (!name) {
+      return '';
+    }
+    const names = name.split(' ');
+    if (names.length > 1) {
+      return `${names[0][0]}${names[names.length - 1][0]}`;
+    }
+    return names[0][0];
+  }
 }

dynamic-sdui-app/src/app/apps/magic-bookstore/components/book-cover-card.component.ts

@@ -8,7 +8,6 @@
 
 import { Component, inject, input } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { Book } from '../data-store';
 import { ChatService } from '../../../chat/chat.service';
 import { RatingStarsComponent } from './rating-stars.component';
@@ -17,14 +16,12 @@ import { BestsellerRibbonComponent } from './bestseller-ribbon.component';
 @Component({
   selector: 'app-book-cover-card',
   standalone: true,
-  imports: [CommonModule, MatProgressSpinnerModule, RatingStarsComponent, BestsellerRibbonComponent],
+  imports: [CommonModule, RatingStarsComponent, BestsellerRibbonComponent],
   template: `@if (book(); as book) {
   <div class="book-card" (click)="viewDetails(book.title)">
     <div class="cover-container">
       @if (book.coverImgUrl) {
         <img [src]="book.coverImgUrl" alt="Cover of {{ book.title }}" class="book-cover">
-      } @else {
-        <mat-spinner diameter="50"></mat-spinner>
       }
       @if (book.bestsellerRank) {
         <app-bestseller-ribbon [rank]="book.bestsellerRank"></app-bestseller-ribbon>
@@ -65,7 +62,6 @@ import { BestsellerRibbonComponent } from './bestseller-ribbon.component';
 
 .book-card:hover {
   box-shadow: var(--shadow-medium);
-  transform: translateY(-2px);
 }
 
 .cover-container {
@@ -92,14 +88,6 @@ import { BestsellerRibbonComponent } from './bestseller-ribbon.component';
   border-top-right-radius: var(--border-radius-md);
 }
 
-mat-spinner {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  --mdc-circular-progress-active-indicator-color: var(--primary);
-}
-
 .book-info {
   padding: var(--spacing-3);
   display: flex;

dynamic-sdui-app/src/app/apps/magic-bookstore/components/book-detail-hero.component.ts

@@ -8,21 +8,22 @@
 
 import { Component, input, computed } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { Book } from '../data-store';
 import { RatingStarsComponent } from './rating-stars.component';
+import { BestsellerRibbonComponent } from './bestseller-ribbon.component';
 
 @Component({
   selector: 'app-book-detail-hero',
   standalone: true,
-  imports: [CommonModule, MatProgressSpinnerModule, RatingStarsComponent],
+  imports: [CommonModule, RatingStarsComponent, BestsellerRibbonComponent],
   template: `@if (book(); as book) {
   <div class="hero-section">
     <div class="cover-image-container">
       @if (book.coverImgUrl) {
         <img [src]="book.coverImgUrl" alt="Cover of {{ book.title }}" class="book-cover-hero">
-      } @else {
-        <mat-spinner diameter="70"></mat-spinner>
+      }
+      @if (book.bestsellerRank) {
+        <app-bestseller-ribbon [rank]="book.bestsellerRank"></app-bestseller-ribbon>
       }
     </div>
     <div class="details-container">
@@ -69,6 +70,7 @@ import { RatingStarsComponent } from './rating-stars.component';
 }
 
 .cover-image-container {
+  position: relative;
   flex-shrink: 0;
   width: 300px; /* Fixed width for the cover */
   height: 450px; /* Aspect ratio for book covers */
@@ -88,10 +90,6 @@ import { RatingStarsComponent } from './rating-stars.component';
   border-radius: var(--border-radius-lg);
 }
 
-mat-spinner {
-  --mdc-circular-progress-active-indicator-color: var(--primary);
-}
-
 .details-container {
   flex-grow: 1;
   display: flex;

dynamic-sdui-app/src/app/apps/vacation-rentals/components/destination-card.component.ts

@@ -29,7 +29,6 @@ import { ChatService } from '../../../chat/chat.service';
 }
 
 :host(:hover) {
-  transform: translateY(-4px);
   box-shadow: var(--haven-shadow-medium, 0px 6px 16px rgba(0, 0, 0, 0.08));
 }
 

dynamic-sdui-app/src/app/apps/vacation-rentals/components/favorites-list.component.ts

@@ -57,7 +57,6 @@ import { DecimalPipe } from '@angular/common';
 
 .favorite-item:hover {
   box-shadow: var(--haven-shadow-medium);
-  transform: translateY(-2px);
 }
 
 .favorite-item-content {

dynamic-sdui-app/src/app/apps/vacation-rentals/components/photo-gallery-grid.component.ts

@@ -92,7 +92,6 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 
 .show-all-photos-button:hover {
   box-shadow: var(--haven-shadow-medium, 0px 6px 16px rgba(0, 0, 0, 0.08));
-  transform: translateY(-2px);
 }
 
 .show-all-photos-button .material-icons {

dynamic-sdui-app/src/app/apps/vacation-rentals/components/user-booking-card.component.ts

@@ -68,7 +68,6 @@ export type Booking = {
 
 .card-container:hover {
   box-shadow: var(--haven-shadow-medium, 0px 6px 16px rgba(0, 0, 0, 0.08));
-  transform: translateY(-2px);
 }
 
 .image-wrapper {