refactor: Minor UI changes (#622)

Author: tammy-a11y

src/app/_samples/mediaco/components/gallery-grid/table-template-card/table-template-card.html

@@ -1,7 +1,7 @@
 <mat-card class="m-card">
   <div class="m-row">
-    <div class="m-icon" [ngClass]="'bg-' + index">
-      <img class="m-icon-img" [src]="data.icon" [ngClass]="'color-' + index" />
+    <div class="m-icon" [ngClass]="'bg-' + index%6">
+      <img class="m-icon-img" [src]="data.icon" [ngClass]="'color-' + index%6" />
     </div>
     <div class="m-content">
       <div class="m-title">{{ data.title }}</div>

src/app/_samples/mediaco/components/list-view/list-view.component.html

@@ -15,10 +15,19 @@ <h3>{{ title }}</h3>
   </div>
   <div *ngIf="template === 'Table'">
     <div class="info-container">
-      <div class="info-item" *ngFor="let item of sourceList; index as i">
-        <div class="icon-wrapper" [ngClass]="'bg-' + i">
-          <img *ngIf="item.icon" [src]="item.icon" class="icon-img" [ngClass]="'color-' + i" />
-          <span *ngIf="!item.icon" class="icon-num" [ngClass]="'color-' + i">{{ item.number }}</span>
+      <div *ngIf="!sourceList">
+        <div class="info-item" *ngFor="let item of [1, 2, 3, 4, 5]">
+          <div class="skeleton icon-wrapper"></div>
+          <div class="content">
+            <div class="skeleton skeleton-text"></div>
+            <div class="skeleton skeleton-text"></div>
+          </div>
+        </div>
+      </div>
+      <div class="info-item" *ngFor="let item of sourceList | slice: 0 : 5; index as i">
+        <div class="icon-wrapper" [ngClass]="'bg-' + (i % 6)">
+          <img *ngIf="item.icon" [src]="item.icon" class="icon-img" [ngClass]="'color-' + (i % 6)" />
+          <span *ngIf="!item.icon" class="icon-num" [ngClass]="'color-' + (i % 6)">{{ item.number }} </span>
         </div>
 
         <div class="content">

src/app/_samples/mediaco/components/list-view/list-view.component.scss

@@ -120,7 +120,7 @@ $primary-purple: #9c27b0;
   filter: brightness(0) saturate(100%) invert(20%) sepia(80%) hue-rotate(25deg) saturate(500%);
 } /* Dark orange */
 .color-4 {
-  filter: brightness(0) saturate(100%) invert(20%) sepia(80%) hue-rotate(120deg) saturate(500%);
+  filter: saturate(100%) invert(20%) sepia(80%) hue-rotate(120deg) saturate(500%) brightness(0);
 } /* Dark green */
 .color-5 {
   filter: brightness(0) saturate(100%) invert(20%) sepia(80%) hue-rotate(90deg) saturate(500%);
@@ -219,3 +219,28 @@ $primary-purple: #9c27b0;
   transform: rotate(15deg);
   transition: transform 0.1s ease-in-out;
 }
+
+.skeleton {
+  animation: skeleton-loading 1s linear infinite alternate;
+  border-radius: 17px;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-color: hsl(200, 20%, 80%);
+  }
+  100% {
+    background-color: hsl(200, 20%, 95%);
+  }
+}
+
+.skeleton-text {
+  width: 100%;
+  height: 0.7rem;
+  margin-bottom: 0.5rem;
+  border-radius: 0.25rem;
+}
+
+.info-item .content .skeleton:last-child {
+  width: 80%;
+}

src/app/_samples/mediaco/components/quick-create/quick-create.component.html

@@ -7,6 +7,16 @@ <h3>Get started</h3>
       </div>
     </div>
     <div class="masonry-wrapper" appMasonry [masonryGap]="16" [masonryRowHeight]="1" masonryItemSelector=".card">
+      <ng-container *ngIf="!cases$">
+        <div class="card" *ngFor="let item of [1, 2, 3, 4]">
+          <div class="skeleton card-header-skeleton"></div>
+          <div class="card-body">
+            <div class="skeleton skeleton-text"></div>
+            <div class="skeleton skeleton-text"></div>
+            <div class="skeleton skeleton-button"></div>
+          </div>
+        </div>
+      </ng-container>
       <ng-container *ngFor="let card of cases$; let i = index">
         <ng-container *ngTemplateOutlet="cardTemplate; context: { $implicit: card }"></ng-container>
       </ng-container>

src/app/_samples/mediaco/components/quick-create/quick-create.component.scss

@@ -199,3 +199,35 @@ $text-dark: #2c2c2c;
   height: 45px;
   filter: brightness(0) saturate(100%) invert(100%);
 }
+
+// --- Skeleton Loader Styles ---
+.skeleton {
+  animation: skeleton-loading 1s linear infinite alternate;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-color: hsl(200, 20%, 80%);
+  }
+  100% {
+    background-color: hsl(200, 20%, 95%);
+  }
+}
+
+.skeleton-text {
+  width: 100%;
+  height: 0.7rem;
+  margin-bottom: 0.5rem;
+  border-radius: 0.25rem;
+}
+
+.card-header-skeleton {
+  height: 140px;
+  border-radius: 12px 12px 0 0;
+}
+
+.skeleton-button {
+  width: 100px;
+  height: 36px;
+  border-radius: 18px;
+}