From c1e9a766ed6e1797ba682f9dcfe801d06d1b8241 Mon Sep 17 00:00:00 2001 From: Jaskaran Sarkaria Date: Mon, 27 Dec 2021 13:20:49 +0000 Subject: [PATCH] =?UTF-8?q?style:=20=F0=9F=92=84=20don't=20show=20white=20?= =?UTF-8?q?hexs=20when=20loading?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .routify/config.js | 2 +- .routify/routes.js | 4 ++-- public/index.html | 27 +++++++++++------------ src/components/HexGrid/HexGrid.svelte | 31 +++++++++++++++++---------- 4 files changed, 36 insertions(+), 28 deletions(-) diff --git a/.routify/config.js b/.routify/config.js index a02739ad..9aa429d1 100644 --- 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 index d4224f85..ed4039ea 100644 --- 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 index 78e663df..443185af 100644 --- a/public/index.html +++ b/public/index.html @@ -1,19 +1,18 @@ + - - - + + + Enki - - - - - - + + + + + + - - + + + \ No newline at end of file diff --git a/src/components/HexGrid/HexGrid.svelte b/src/components/HexGrid/HexGrid.svelte index 48ef4370..06bcabdb 100644 --- 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)}
  • -
    - +
    + (loadedElemArr[idx] = true)} /> handleError(idx)} loading="eager" + on:load={() => (loadedElemArr[idx] = true)} /> - hexagon shape for the category button + {#if loadedElemArr[idx]} + hexagon shape for the category button + {/if}