Testing new image placeholder

Author: Mateus Medeiros

src/webapp/src/app/listen-and-write/news-image/news-image.component.html

@@ -9,6 +9,7 @@
                 priority
                 sizes="(max-width: 600px) 92vw, (max-width: 900px) 520px, 500px"
                 alt="News image"
+                [appImagePlaceholder]="imageBaseId"
                 (error)="onOptimizedImageError()">
         } @else {
             <div class="news-image-placeholder"></div>

src/webapp/src/app/listen-and-write/news-image/news-image.component.scss

@@ -28,7 +28,46 @@
 .news-image-placeholder {
     width: 100%;
     height: 100%;
-    background: linear-gradient(135deg, rgba(58, 125, 255, 0.18), rgba(58, 125, 255, 0.06));
+    position: relative;
+    overflow: hidden;
+    isolation: isolate;
+    background:
+        radial-gradient(70% 70% at 18% 18%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 60%),
+        linear-gradient(135deg, rgba(58, 125, 255, 0.2), rgba(58, 125, 255, 0.04));
+
+    &::before {
+        content: '';
+        position: absolute;
+        inset: -45% -45%;
+        background: linear-gradient(
+            110deg,
+            rgba(255, 255, 255, 0.22) 0%,
+            rgba(255, 255, 255, 0.08) 45%,
+            rgba(255, 255, 255, 0.22) 100%
+        );
+        transform: translateX(-28%);
+        animation: wf-placeholder-sweep 2.8s ease-in-out infinite;
+        opacity: 0.6;
+    }
+
+    &::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background-image: radial-gradient(rgba(58, 125, 255, 0.18) 1px, transparent 1px);
+        background-size: 20px 20px;
+        opacity: 0.28;
+    }
+}
+
+@keyframes wf-placeholder-sweep {
+    0% {
+        transform: translateX(-35%);
+    }
+
+    100% {
+        transform: translateX(35%);
+    }
 }
 
 .news-font {

src/webapp/src/app/listen-and-write/news-image/news-image.component.ts

@@ -1,11 +1,12 @@
 import { CommonModule, IMAGE_LOADER, NgOptimizedImage } from '@angular/common';
 import { Component, computed, effect, input, signal } from '@angular/core';
 import { Proposition } from 'src/api/listen-and-write';
+import { ImagePlaceholderDirective } from '../../shared/directives/image-placeholder.directive';
 import { minioVariantImageLoader } from '../../shared/image-loaders/minio-variant-image.loader';
 
 @Component({
   selector: 'app-news-image',
-  imports: [ NgOptimizedImage, CommonModule ],
+  imports: [ NgOptimizedImage, CommonModule, ImagePlaceholderDirective ],
   templateUrl: './news-image.component.html',
   styleUrl: './news-image.component.scss',
   providers: [

src/webapp/src/app/shared/directives/image-placeholder.directive.ts

@@ -0,0 +1,77 @@
+import { isPlatformServer } from '@angular/common';
+import {
+  Directive,
+  ElementRef,
+  HostListener,
+  Inject,
+  Input,
+  OnChanges,
+  PLATFORM_ID,
+  Renderer2,
+  SimpleChanges,
+} from '@angular/core';
+
+type ImageSrc = string | null | undefined;
+
+@Directive({
+  selector: 'img[appImagePlaceholder]',
+  standalone: true,
+})
+export class ImagePlaceholderDirective implements OnChanges {
+  @Input() appImagePlaceholder: ImageSrc = null;
+
+  private readonly skeletonClass = 'wf-image-skeleton';
+
+  constructor(
+    @Inject(PLATFORM_ID) private platformId: object,
+    private imageRef: ElementRef<HTMLImageElement>,
+    private renderer: Renderer2
+  ) {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (isPlatformServer(this.platformId)) {
+      return;
+    }
+
+    if (changes['appImagePlaceholder']) {
+      this.resetSkeleton();
+    }
+  }
+
+  @HostListener('load')
+  onLoad(): void {
+    this.removeSkeleton();
+  }
+
+  @HostListener('error')
+  onError(): void {
+    this.removeSkeleton();
+  }
+
+  private resetSkeleton(): void {
+    const image = this.imageRef.nativeElement;
+    const resolvedSrc =
+      this.appImagePlaceholder || image.currentSrc || image.getAttribute('src');
+
+    if (!resolvedSrc) {
+      this.removeSkeleton();
+      return;
+    }
+
+    this.renderer.addClass(image, this.skeletonClass);
+
+    if (image.complete && image.naturalWidth > 0) {
+      this.removeSkeleton();
+    }
+  }
+
+  removeSkeleton(): void {
+    // use timeout to ensure this runs after load event
+    setTimeout(() => {
+      // assert the DOM element still exists before trying to remove class
+      if (this.imageRef && this.imageRef.nativeElement) {
+        this.renderer.removeClass(this.imageRef.nativeElement, this.skeletonClass);
+      }
+    }, 2000);
+  }
+}

src/webapp/src/app/shared/exercise-grid/exercise-grid.component.html

@@ -71,6 +71,7 @@ <h3>Error</h3>
                    [loaderParams]="imageLoaderParams"
                    sizes="(max-width: 600px) 92vw, (max-width: 992px) 48vw, 320px"
                    fill
+                   [appImagePlaceholder]="exercise.imageBaseId"
                    (error)="onOptimizedImageError(exercise.id)"
                    [alt]="'Thumbnail for ' + exercise.title + ' - ' + exercise.level + ' level ' + exercise.topic + ' exercise'" 
                    [priority]="!maxItems && i === 0"

src/webapp/src/app/shared/exercise-grid/exercise-grid.component.scss

@@ -113,21 +113,65 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(135deg, vars.$color-primary 0%, vars.$color-primary-dark 100%);
+  position: relative;
+  overflow: hidden;
+  isolation: isolate;
+  background:
+    radial-gradient(80% 80% at 15% 15%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 60%),
+    linear-gradient(135deg, vars.$color-primary 0%, vars.$color-primary-dark 100%);
   color: white;
   gap: 0.5rem;
 
+  &::before {
+    content: '';
+    position: absolute;
+    inset: -40% -40%;
+    background: linear-gradient(
+      115deg,
+      rgba(255, 255, 255, 0.22) 0%,
+      rgba(255, 255, 255, 0.06) 45%,
+      rgba(255, 255, 255, 0.22) 100%
+    );
+    transform: translateX(-30%);
+    animation: wf-placeholder-sweep 2.6s ease-in-out infinite;
+    opacity: 0.7;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px);
+    background-size: 18px 18px;
+    opacity: 0.25;
+  }
+
   mat-icon {
     font-size: 3rem;
     width: 3rem;
     height: 3rem;
     opacity: 0.9;
+    position: relative;
+    z-index: 1;
   }
 
   .placeholder-text {
     font-size: 2rem;
     font-weight: 600;
     opacity: 0.9;
+    position: relative;
+    z-index: 1;
+    text-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
+  }
+}
+
+@keyframes wf-placeholder-sweep {
+  0% {
+    transform: translateX(-35%);
+  }
+
+  100% {
+    transform: translateX(35%);
   }
 }
 

src/webapp/src/app/shared/exercise-grid/exercise-grid.component.ts

@@ -13,6 +13,7 @@ import { SubjectEnum } from '../../../api/listen-and-write/model/subjectEnum';
 import { ComplexityEnum } from '../../../api/listen-and-write/model/complexityEnum';
 import { PropositionsService } from '../../../api/listen-and-write/api/propositions.service';
 import { minioVariantImageLoader } from '../image-loaders/minio-variant-image.loader';
+import { ImagePlaceholderDirective } from '../directives/image-placeholder.directive';
 
 export interface Exercise {
   id: number;
@@ -42,6 +43,7 @@ export interface Exercise {
     MatPaginatorModule,
     MatProgressSpinnerModule,
     FormsModule,
+    ImagePlaceholderDirective,
   ],
   templateUrl: './exercise-grid.component.html',
   styleUrls: ['./exercise-grid.component.scss'],

src/webapp/src/styles.scss

@@ -62,6 +62,26 @@ p, h1, h2, h3, h4, h5, h6, span, label {
     flex-direction: column;
 }
 
+.wf-image-skeleton {
+  background:
+    linear-gradient(110deg, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0.35) 18%, rgba(255, 255, 255, 0) 33%),
+    linear-gradient(135deg, rgba(58, 125, 255, 0.08), rgba(58, 125, 255, 0.02));
+  background-size: 200% 100%, 100% 100%;
+  animation: wf-skeleton-shimmer 1.6s ease-in-out infinite;
+  border-radius: inherit;
+  filter: saturate(0.95);
+}
+
+@keyframes wf-skeleton-shimmer {
+  0% {
+    background-position: -160% 0, 0 0;
+  }
+
+  100% {
+    background-position: 160% 0, 0 0;
+  }
+}
+
 /* WriteFluency Shepherd theme */
 .shepherd-element.wf-tour {
   border-radius: 16px;