diff --git a/src/app.d.ts b/src/app.d.ts
index 9649e7b..367926a 100644
--- a/src/app.d.ts
+++ b/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 {}
   }
 }
 
diff --git a/src/lib/layout/MasonryLayout.svelte b/src/lib/layout/MasonryLayout.svelte
index 5deaee5..8eacaf7 100644
--- a/src/lib/layout/MasonryLayout.svelte
+++ b/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}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index e00c4b1..abcea71 100644
--- a/src/routes/+layout.svelte
+++ b/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>
diff --git a/src/routes/code/skel.svelte b/src/routes/code/skel.svelte
new file mode 100644
index 0000000..b8fb8fb
--- /dev/null
+++ b/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>