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:
@@ -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"
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user