perf(hydration): implement cache-first site discovery and SWR event loading

- Refactored lookup_site_domain_v3 to be cache-first, unblocking root layout.
- Implemented Stale-While-Revalidate (SWR) pattern for load_ae_obj_id__event.
- Added global hydration overlay and loading spinner to +layout.svelte.
- Updated site domain whitelist to persist critical account/styling metadata in Dexie.
- Refactored root load function to return immediately if cached site data is found.
This commit is contained in:
Scott Idem
2026-01-26 16:41:14 -05:00
parent c95b866969
commit 359eb9cf3f
5 changed files with 157 additions and 67 deletions

View File

@@ -718,6 +718,14 @@
}
});
let is_hydrating = $state(true);
$effect(() => {
if (browser && $ae_loc?.account_id) {
// Give a tiny delay to ensure everything is rendered
setTimeout(() => is_hydrating = false, 150);
}
});
$effect(() => {
if (browser) {
const interval = setInterval(() => {
@@ -1325,6 +1333,18 @@ email = ${$ae_loc?.email}
<!-- The children will contain top level (directly under body tag) div tag(s) or similar. Modal and AppShell should also be set there. The AppShell gives access to a header, footer, AppBar (usually under header), -->
{@render children?.()}
{#if is_hydrating}
<div class="fixed inset-0 z-[99] flex flex-col items-center justify-center bg-surface-50/50 dark:bg-surface-900/50 backdrop-blur-[2px] transition-all duration-500">
<div class="preset-filled-surface-100-900 p-6 rounded-xl shadow-2xl border border-surface-500/20 flex flex-col items-center gap-4">
<span class="fas fa-cog fa-spin text-4xl text-primary-500"></span>
<div class="text-center">
<div class="text-lg font-bold">Hydrating Aether...</div>
<div class="text-xs opacity-60">Synchronizing local cache</div>
</div>
</div>
</div>
{/if}
{:else if browser || flag_reload}
<div
class="flex flex-col items-center justify-center max-w-lg mx-auto space-y-6 border border-red-500 rounded-lg p-4 bg-green-50 dark:bg-green-900 m-8"

View File

@@ -123,6 +123,22 @@ export async function load({ fetch, params, parent, route, url }) {
let api_error = false;
let is_native = false;
// 1. FAST PATH: Check Dexie for cached site domain first
// This allows the load function to return nearly instantly if the user has visited before.
if (typeof window !== 'undefined' && (window as any).indexedDB) {
try {
// Use the db_core instance directly for a quick lookup
const { db_core } = await import('$lib/ae_core/db_core');
const cached = await db_core.site_domain.where('fqdn').equals(fqdn).first();
if (cached) {
if (log_lvl) console.log('ROOT LOAD: Found cached site domain. Unblocking layout.');
result = cached;
}
} catch (e) {
if (log_lvl) console.warn('ROOT LOAD: Failed to read from Dexie cache.', e);
}
}
// Detect Aether Native Bridge (Electron)
if (typeof window !== 'undefined' && (window as any).aetherNative) {
is_native = true;
@@ -132,6 +148,7 @@ export async function load({ fetch, params, parent, route, url }) {
if (native_device_config) {
if (log_lvl) console.log('ROOT LOAD: Native device config received:', native_device_config);
// Map native device config to the expected result structure
// Use native as source of truth if available
result = {
...native_device_config,
// Ensure naming consistency
@@ -179,10 +196,10 @@ export async function load({ fetch, params, parent, route, url }) {
}
}
// Perform standard FQDN lookup if not native or if native fetch failed
// 2. SLOW PATH: Wait for API site lookup only if we have no result yet
if (!result) {
try {
if (log_lvl) console.log(`ROOT LOAD: Starting site lookup V3 for ${fqdn}...`);
if (log_lvl) console.log(`ROOT LOAD: No cache. Starting site lookup V3 for ${fqdn}...`);
// Use dedicated Agent Key for Bootstrap and include the unauthenticated bypass header ONLY for this request
const bootstrap_api_cfg = {
@@ -206,6 +223,15 @@ export async function load({ fetch, params, parent, route, url }) {
console.error(`ROOT LOAD: Site lookup critical failure for ${fqdn}.`, err);
api_error = true;
}
} else {
// We have a result (cache or native), fire off the refresh in the background to update Dexie
if (log_lvl) console.log('ROOT LOAD: Result already obtained. Background refresh triggered.');
lookup_site_domain_v3({
api_cfg: ae_api_init,
fqdn,
view: 'base',
log_lvl: 0
});
}
// Defensive check: if result is false (common from API helper) or null, use emergency ghost