+3

src/lib/components/layout/index.ts

reviewed

··· 6 6 // DynamicLinks stays local — it uses the DID-bound service wrapper. 7 7 export { default as DynamicLinks } from './main/DynamicLinks.svelte'; 8 8 9 9 + // Navigation progress bar for page transitions. 10 10 + export { default as NavigationProgress } from './main/NavigationProgress.svelte'; 11 11 + 9 12 // These are shared and prop-only — re-export from the package. 10 13 export { ThemeToggle, WolfToggle, ScrollToTop } from '@ewanc26/ui'; 11 14 export { LinkCard, ProfileCard } from '@ewanc26/ui';

+43

src/lib/components/layout/main/NavigationProgress.svelte

reviewed

··· 1 1 + <script lang="ts"> 2 2 + import { navigating } from '$app/stores'; 3 3 + 4 4 + let isLoading = $state(false); 5 5 + let progress = $state(0); 6 6 + let showBar = $state(false); 7 7 + let fadeOut = $state(false); 8 8 + 9 9 + $effect(() => { 10 10 + if ($navigating) { 11 11 + isLoading = true; 12 12 + showBar = true; 13 13 + fadeOut = false; 14 14 + // Start at a small width, then advance 15 15 + progress = 30; 16 16 + requestAnimationFrame(() => { 17 17 + progress = 80; 18 18 + }); 19 19 + } else if (isLoading) { 20 20 + // Navigation complete — fill to 100% 21 21 + progress = 100; 22 22 + isLoading = false; 23 23 + // Fade out after the bar completes 24 24 + fadeOut = true; 25 25 + setTimeout(() => { 26 26 + showBar = false; 27 27 + progress = 0; 28 28 + fadeOut = false; 29 29 + }, 300); 30 30 + } 31 31 + }); 32 32 + </script> 33 33 + 34 34 + {#if showBar} 35 35 + <div 36 36 + class="fixed top-0 left-0 z-[60] h-0.5 bg-primary-500 transition-[width] duration-300 ease-out dark:bg-primary-400" 37 37 + class:opacity-0={fadeOut} 38 38 + class:transition-opacity={fadeOut} 39 39 + style="width: {progress}%" 40 40 + role="progressbar" 41 41 + aria-label="Loading page" 42 42 + ></div> 43 43 + {/if}

+1

src/lib/components/layout/main/index.ts

reviewed

··· 1 1 // DynamicLinks uses the app's DID-bound fetchLinks wrapper — keep it local. 2 2 export { default as DynamicLinks } from './DynamicLinks.svelte'; 3 3 export { default as ScrollToTop } from './ScrollToTop.svelte'; 4 4 + export { default as NavigationProgress } from './NavigationProgress.svelte';

+2 -5

src/routes/+layout.svelte

reviewed

··· 1 1 <script lang="ts"> 2 2 import '../app.css'; 3 3 - import { Header, Footer, ScrollToTop } from '$lib/components/layout'; 3 3 + import { Header, Footer, ScrollToTop, NavigationProgress } from '$lib/components/layout'; 4 4 import HappyMacEasterEgg from '$lib/components/HappyMacEasterEgg.svelte'; 5 5 import { type SiteMetadata } from '$lib/helper/siteMeta'; 6 6 import type { ProfileData, SiteInfoData } from '$lib/services/atproto'; ··· 42 42 console.error('[App] Unhandled promise rejection:', event.reason); 43 43 }; 44 44 }); 45 45 - 46 46 - 47 45 48 46 // Compute fediverse:creator from AP instance and username 49 47 const fediverseCreator = $derived.by(() => { ··· 85 83 <link rel="manifest" href="/favicon/site.webmanifest" /> 86 84 </svelte:head> 87 85 88 88 - 89 89 - 90 86 <div 91 87 class="flex min-h-screen flex-col overflow-x-hidden bg-canvas-50 text-ink-900 dark:bg-canvas-950 dark:text-ink-50" 92 88 > 89 89 + <NavigationProgress /> 93 90 <Header profile={data.profile} /> 94 91 95 92 <main id="main-content" class="container mx-auto grow px-4 py-8" tabindex="-1">