style: 💄 don't show white hexs when loading

jaskaransarkaria · Dec 27, 2021 · c1e9a76 · c1e9a76
1 parent d10ed5d
commit c1e9a76
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 28 deletions.
diff --git a/.routify/config.js b/.routify/config.js
@@ -8,5 +8,5 @@ module.exports = {
   noHashScroll: false,
   distDir: 'dist',
   extensions: ['svelte', 'html', 'svx', 'md'],
-  started: '2021-12-24T19:01:51.577Z',
+  started: '2021-12-27T13:07:50.640Z',
 };
diff --git a/.routify/routes.js b/.routify/routes.js
@@ -1,10 +1,10 @@
 /**
  * @roxi/routify 2.7.3
- * File generated Fri Dec 24 2021 19:01:54 GMT+0000 (Greenwich Mean Time)
+ * File generated Mon Dec 27 2021 13:07:53 GMT+0000 (Greenwich Mean Time)
  */
 
 export const __version = '2.7.3';
-export const __timestamp = '2021-12-24T19:01:54.121Z';
+export const __timestamp = '2021-12-27T13:07:53.623Z';
 
 //buildRoutes
 import { buildClientTree } from '@roxi/routify/runtime/buildRoutes';

diff --git a/public/index.html b/public/index.html
@@ -1,19 +1,18 @@
+
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta
-      name="description"
-      content="Enki Jewellery & Craft Gallery shop in Kings Heath, Birmingham, UK"
-    />
+  <meta charset='utf-8'>
+  <meta name='viewport' content='width=device-width, initial-scale=1'>
+    <meta name="description" content="Enki Jewellery & Craft Gallery shop in Kings Heath, Birmingham, UK">
     <title>Enki</title>
-
-    <link rel="icon" type="image/png" href="/favicon.png" />
-    <link rel="stylesheet" href="/global.css" />
-    <link rel="stylesheet" href="/build/bundle-1640372511575.css" />
-
-    <script defer src="/build/bundle-1640372511575.js"></script>
+    
+    <link rel='icon' type='image/png' href='/favicon.png'>
+    <link rel='stylesheet' href='/global.css'>
+    <link rel='stylesheet' href='/build/bundle-1640610470638.css'>
+    
+    <script defer src='/build/bundle-1640610470638.js'></script>
   </head>
-  <body></body>
-</html>
+  <body>
+  </body>
+</html>
diff --git a/src/components/HexGrid/HexGrid.svelte b/src/components/HexGrid/HexGrid.svelte
@@ -13,6 +13,7 @@
 
   let imgElemArr: HTMLImageElement[] = [...createEmptyArray(data.length)];
   let sourceElemArr: HTMLSourceElement[] = [...createEmptyArray(data.length)];
+  let loadedElemArr: boolean[] = [...createEmptyArray(data.length)];
 
   const handleError = (idx: number) => {
     imgElemArr[idx].onerror = null;
@@ -26,14 +27,15 @@
   {#each data as category, idx (category.Id)}
     <li class={showGrid ? 'hex' : 'hex-flex'}>
       <div class="hex-in">
-        <div class="hex-link">
-          <picture in:fade={{ duration: 1000 }}>
+        <div class={loadedElemArr[idx] ? 'hex-link' : 'hex-link hex-loading'}>
+          <picture in:fade={{ duration: 800 }}>
             <source
               srcset={`https://enki.imgix.net/${category.Id}`}
               type="image/jpg"
               bind:this={sourceElemArr[idx]}
               data-testid="hex-image"
               loading="eager"
+              on:load={() => (loadedElemArr[idx] = true)}
             />
             <img
               src="/faith.jpg"
@@ -42,17 +44,20 @@
               bind:this={imgElemArr[idx]}
               on:error={() => handleError(idx)}
               loading="eager"
+              on:load={() => (loadedElemArr[idx] = true)}
             />
           </picture>
-          <img
-            in:fade|local={{ delay: 200, duration: 1200 }}
-            src={`https://enki.imgix.net/hex_${Math.floor(
-              Math.random() * (6 - 1 + 1) + 1
-            )}.svg`}
-            alt="hexagon shape for the category button"
-            class="hexagon-shape"
-            loading="lazy"
-          />
+          {#if loadedElemArr[idx]}
+            <img
+              in:fade|local={{ duration: 800 }}
+              src={`https://enki.imgix.net/hex_${Math.floor(
+                Math.random() * (6 - 1 + 1) + 1
+              )}.svg`}
+              alt="hexagon shape for the category button"
+              class="hexagon-shape"
+              loading="lazy"
+            />
+          {/if}
           <button
             data-testid="hex-button"
             on:click={/*istanbul ignore next */ () => categoryFn(category)}
@@ -198,6 +203,10 @@
     transform: translate3d(0, 0, 0);
   }
 
+  .hex-loading {
+    background-color: rgba(238, 238, 238, 1);
+  }
+
   @media (min-width: 360px) {
     .hex h3,
     .hex-flex h3 {