fix(front): add loading state to posts grid (#1187)

.github/workflows/test-backstop.yml

@@ -121,7 +121,7 @@ jobs:
         if: steps.backstop.outcome != 'success'
         env:
           REPORT_PATH: ${{ inputs.env }}
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: backstop-report
           retention-days: 3

front/src/lib/components/posts/Code/Code.svelte

@@ -6,7 +6,7 @@
   import json from 'svelte-highlight/languages/json';
   import plaintext from 'svelte-highlight/languages/plaintext';
   import xml from 'svelte-highlight/languages/xml';
-  import CodeCopy from '@components/posts/Code/CodeCopy.svelte';
+  import CodeCopy from './CodeCopy.svelte';
   import '@styles/components/Code/Code.css';
 
   export let pageTitle, slug, syntax, code, showLineNumbers;

front/src/lib/components/posts/PostsGrid.svelte

@@ -1,17 +1,12 @@
 <script>
+  import PostsGridItem from './PostsGridItem.svelte';
+
   import '@styles/components/posts-grid.css';
   export let gridItems;
 </script>
 
 <ul class="posts-grid">
-  {#each gridItems as { lazyImage, slug, title }}
-    <li
-      class="posts-grid-item"
-      style={lazyImage && `background-image: url('${lazyImage}');`}
-    >
-      <a href="/post/{slug}/" class="posts-grid-link">
-        <h2 class="link-bg">{title}</h2>
-      </a>
-    </li>
+  {#each gridItems as gridItem}
+    <PostsGridItem {...gridItem} />
   {/each}
 </ul>

front/src/lib/components/posts/PostsGridItem.svelte

@@ -0,0 +1,49 @@
+<script>
+  import { onMount } from 'svelte';
+  import '@styles/components/posts-grid.css';
+  export let lazyImage, slug, title;
+  let loaded = false;
+
+  /**
+   * Lifecycle function executed after the component is mounted.
+   * Asynchronously loads the image and updates the component state accordingly.
+   *
+   * @function onMount
+   * @async
+   * @throws {Error} - Throws an error if image loading fails.
+   */
+  onMount(async function () {
+    /**
+     * Image object for loading the SVG icon.
+     * @type {HTMLImageElement}
+     */
+    const img = new Image();
+    img.src = lazyImage;
+
+    img.onload = function () {
+      loaded = true;
+    };
+  });
+</script>
+
+<li
+  class:loaded
+  class="posts-grid-item"
+  style={lazyImage && `background-image: url('${lazyImage}');`}
+>
+  <a href="/post/{slug}/" class="posts-grid-link" class:loaded>
+    <h2 class="link-bg">{title}</h2>
+  </a>
+</li>
+
+<style lang="postcss">
+  .posts-grid-item {
+    opacity: 0;
+    transition-duration: var(--transition-duration);
+    transition-property: opacity;
+    transition-timing-function: var(--transition-timing-function);
+    &.loaded {
+      opacity: 1;
+    }
+  }
+</style>

front/static/styles/noscript.css

@@ -31,3 +31,6 @@ body .footer {
 .post .hero-wrap noscript .hero.noscript {
   display: block;
 }
+.posts-grid .posts-grid-item {
+  opacity: 1 !important;
+}