Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf(app): remove unused Google Fonts requests, add pre-JS loading spinner

Browse Source 
- app.html: comment out 3 Google Fonts <link> tags (Noto Sans, Noto Serif,
  Roboto Mono) — no theme or component applies these families; all themes use
  system-ui. Saves 3 blocking network requests on every page load.
- app.html: add subtle CSS-only #ae_loader spinner (1.75rem ring, pointer-events:none)
  that shows during JS download + root load function, before Svelte mounts.
- +layout.svelte: add onMount to remove #ae_loader as soon as Svelte bootstraps;
  the existing is_hydrating frosted-glass overlay takes over from there.
- app.css: comment out orphaned Quicksand @font-face — font-family was never
  applied to any element so browser never fetched it anyway.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
2026-05-19 15:02:19 -04:00
parent 615af58a11
commit f37c64c68b
3 changed files with 43 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/app.css
View File

@@ -233,12 +233,14 @@ html.trusted_access #appShell {
font-display: swap; font-display: swap;
} */ } */
/* modern theme */ /* modern theme — @font-face commented out 2026-05-19: Quicksand is declared but no
@font-face { CSS rule applies font-family:'Quicksand' to any element, so the browser never
fetches this file. Re-enable if a theme or component starts using it. */
/* @font-face {
font-family: 'Quicksand'; font-family: 'Quicksand';
src: url('/fonts/Quicksand.ttf'); src: url('/fonts/Quicksand.ttf');
font-display: swap; font-display: swap;
} } */
/* :root [data-theme='modern'] { */ /* :root [data-theme='modern'] { */
/* --theme-rounded-base: 20px; /* --theme-rounded-base: 20px;

31
src/app.html
View File

@@ -53,6 +53,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Google Fonts: commented out 2026-05-19 — no theme or component applies these families;
all themes use system-ui/sans-serif. Re-enable if a theme is added that references them.
<link rel="preconnect" href="https://fonts.gstatic.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" />
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link <link
@@ -64,14 +66,43 @@
<link <link
href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"
rel="stylesheet" /> rel="stylesheet" />
-->
<!-- <link href="app.css" rel="stylesheet"> --> <!-- <link href="app.css" rel="stylesheet"> -->
<!-- Pre-JS loading indicator. Removed by root +layout.svelte onMount once Svelte
bootstraps and the existing is_hydrating overlay takes over. Pointer-events:none
so it never blocks interaction if something goes wrong with the remove call. -->
<style>
#ae_loader {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
pointer-events: none;
}
#ae_loader::after {
content: '';
width: 1.75rem;
height: 1.75rem;
border-radius: 50%;
border: 2px solid rgba(120, 120, 120, 0.15);
border-top-color: rgba(120, 120, 120, 0.45);
animation: ae_loader_spin 0.75s linear infinite;
}
@keyframes ae_loader_spin {
to { transform: rotate(360deg); }
}
</style>
%sveltekit.head% %sveltekit.head%
</head> </head>
<!-- h-full w-full overflow-auto --> <!-- h-full w-full overflow-auto -->
<!-- overflow-x-scroll --> <!-- overflow-x-scroll -->
<body data-sveltekit-preload-data="hover" class="h-full w-full"> <body data-sveltekit-preload-data="hover" class="h-full w-full">
<div id="ae_loader" aria-hidden="true"></div>
<div style="display: contents" class="">%sveltekit.body%</div> <div style="display: contents" class="">%sveltekit.body%</div>
</body> </body>
</html> </html>

8
src/routes/+layout.svelte
View File

@@ -4,7 +4,7 @@
let log_lvl: number = 0; let log_lvl: number = 0;
// *** Import Svelte specific // *** Import Svelte specific
import { untrack } from 'svelte'; import { onMount, untrack } from 'svelte';
import { goto, invalidateAll } from '$app/navigation'; import { goto, invalidateAll } from '$app/navigation';
import '../app.css'; import '../app.css';
@@ -53,6 +53,12 @@ interface Props {
let { data, children }: Props = $props(); let { data, children }: Props = $props();
// Remove the pre-JS loader from app.html as soon as Svelte mounts.
// The existing is_hydrating overlay takes over from here.
onMount(() => {
document.getElementById('ae_loader')?.remove();
});
// STABLE DERIVATION: Using prop data directly to avoid store loops // STABLE DERIVATION: Using prop data directly to avoid store loops
let ae_acct = $derived(data[data.account_id]); let ae_acct = $derived(data[data.account_id]);