240402: Github API: Implement skeleton loader for code page

src/app.d.ts

@@ -4,9 +4,9 @@ declare global {
   namespace App {
     // interface Error {}
     // interface Locals {}
-    interface PageData {}
+    // interface PageData {}
     // interface PageState {}
-    interface Platform {}
+    // interface Platform {}
   }
 }
 

src/lib/layout/MasonryLayout.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { fade } from 'svelte/transition'
+
   // hours turned to days as every third-party masonry layout
   // library from across the land was tried, and one by one each
   // failed to work correctly (even Flowbite Gallery)
@@ -36,7 +38,11 @@
 
 {#key columns}
   {#if items && columns && items.length > 0}
-    <div class={`flex flex-row justify-center ${divClass} ${gap}`} bind:clientWidth={currentWidth}>
+    <div
+      class={`flex flex-row justify-center ${divClass} ${gap}`}
+      bind:clientWidth={currentWidth}
+      transition:fade
+    >
       {#each columns as column}
         <div class={`flex flex-col justify-start ${gap}`}>
           {#each column as item}

src/routes/+layout.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { navigating } from '$app/stores'
   import {
     DATA_KEY,
     DRAWER_KEY,
@@ -11,11 +12,12 @@
   import Header from '$src/lib/layout/Header.svelte'
   import NavDrawer from '$src/lib/layout/NavDrawer.svelte'
   import Title from '$src/lib/layout/Title.svelte'
+  import { Spinner } from 'flowbite-svelte'
   import { setContext } from 'svelte'
   import { readable, writable } from 'svelte/store'
-  import { fade } from 'svelte/transition'
   import '../app.pcss'
   import type { PageData } from './$types.js'
+  import Skel from './code/skel.svelte'
 
   export let data: PageData
 
@@ -32,15 +34,20 @@
 </script>
 
 <Title title={occupation} />
-
 <NavDrawer />
 
-<div class="p-2 md:p-4" in:fade>
+<div class="p-2 md:p-4">
   <Header />
-
-  <main>
-    <slot />
-  </main>
-
+  {#if $navigating && $navigating.to?.route.id === '/code'}
+    <Skel />
+  {:else if $navigating}
+    <div class="flex h-full w-full grow flex-col items-center justify-center">
+      <Spinner class="absolute top-1/2 my-auto" size={32} />
+    </div>
+  {:else}
+    <main>
+      <slot />
+    </main>
+  {/if}
   <Footer />
 </div>

src/routes/code/skel.svelte

@@ -0,0 +1,15 @@
+<script>
+  import { Skeleton } from 'flowbite-svelte'
+</script>
+
+<div class="m-4 mt-24 grid grid-flow-row gap-4 md:grid-cols-2 lg:grid-cols-3">
+  <Skeleton />
+  <Skeleton />
+  <Skeleton />
+  <Skeleton />
+  <Skeleton />
+  <Skeleton />
+  <Skeleton />
+  <Skeleton />
+  <Skeleton />
+</div>