Redesign siteLinks use to lazy-load images:

* Sync prepSiteLinks() for SSR and pre-rendering * Parallel loading in onMount() with array of promises of loaded components
iva2k · Jul 31, 2024 · 36be3ee · 36be3ee
1 parent a986d69
commit 36be3ee
Show file tree

Hide file tree

Showing 3 changed files with 151 additions and 199 deletions.
diff --git a/src/lib/components/header/PureHeader.svelte b/src/lib/components/header/PureHeader.svelte
@@ -2,40 +2,39 @@
   import { onMount } from 'svelte';
   import logo from '$lib/images/logo.svg';
   import website from '$lib/config/website';
-  import { prepSiteLinks } from '$lib/config/configUtils';
+  import { loadSiteLinks, prepSiteLinks } from '$lib/config/configUtils';
   import type { SiteLink } from '$lib/types';
   const { websiteUrlBase, siteLinks } = website;
 
   export let pathname = '/';
   $: path1st = '/' + (pathname ?? '').split('/')[1];
 
-  let brandLink: SiteLink;
-  let headerLinks: SiteLink[] = [];
+  let brandLink: SiteLink = prepSiteLinks(
+    siteLinks,
+    'brand',
+    1,
+    /* nodeFilter */ true,
+    /* flatten */ true,
+    /* prune */ false // Allow brand without a link
+  )?.[0];
+  let headerLinks: SiteLink[] = prepSiteLinks(
+    siteLinks,
+    'header',
+    2,
+    true,
+    /* flatten */ true,
+    /* prune */ true
+  );
   onMount(async () => {
     /* DISABLED (see root +layout.svelte)
     await loadIonicPWAElements(window);
     */
     const mypath = import.meta.url;
-    brandLink = (
-      await prepSiteLinks(
-        siteLinks,
-        mypath,
-        'brand',
-        1,
-        /* nodeFilter */ true,
-        /* flatten */ true,
-        /* prune */ false // Allow brand without a link
-      )
-    )?.[0];
-    headerLinks = await prepSiteLinks(
-      siteLinks,
-      mypath,
-      'header',
-      2,
-      true,
-      /* flatten */ true,
-      /* prune */ true
-    );
+    // [brandLink, ... headerLinks] =
+    await Promise.all([
+      loadSiteLinks([brandLink], mypath)?.[0],
+      ...loadSiteLinks(headerLinks, mypath)
+    ]);
     console.log('DEBUG: headerLinks=%o', headerLinks);
   });
 </script>