perf(hydration): implement non-blocking load path for Launcher and Sessions
- Implemented SWR pattern for session loading in ae_events__event_session.ts. - Refactored Launcher layouts (+layout.ts and +page.ts) to fire background refreshes instead of awaiting API calls. - Removed redundant blocking logic to ensure instant UI rendering from Dexie cache.
This commit is contained in:
Scott Idem
@@ -10,7 +10,7 @@ import { load_ae_obj_li__event_presentation } from '$lib/ae_events/ae_events__ev
|
||||
|
||||
const ae_promises: key_val = {};
|
||||
|
||||
// Updated 2026-01-20 to V3
|
||||
// Updated 2026-01-26 (SWR Optimization)
|
||||
export async function load_ae_obj_id__event_session({
|
||||
api_cfg,
|
||||
event_session_id,
|
||||
@@ -41,99 +41,77 @@ export async function load_ae_obj_id__event_session({
|
||||
log_lvl?: number;
|
||||
}): Promise<ae_EventSession | null> {
|
||||
if (log_lvl) {
|
||||
console.log(`*** load_ae_obj_id__event_session() *** [V3] id=${event_session_id}`);
|
||||
console.log(`*** load_ae_obj_id__event_session() *** [V3] id=${event_session_id} (SWR)`);
|
||||
}
|
||||
|
||||
// Check if offline
|
||||
if (typeof navigator !== 'undefined' && !navigator.onLine) {
|
||||
if (log_lvl) console.log('Browser is offline. Skipping API and attempting cache load.');
|
||||
ae_promises.load__event_session_obj = await db_events.session.get(event_session_id);
|
||||
if (ae_promises.load__event_session_obj) {
|
||||
return await _handle_nested_loads(ae_promises.load__event_session_obj, {
|
||||
api_cfg, inc_file_li, inc_all_file_li, inc_presentation_li, inc_presenter_li, enabled, hidden, limit, offset, try_cache, log_lvl
|
||||
});
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
try {
|
||||
ae_promises.load__event_session_obj = await api.get_ae_obj_v3({
|
||||
api_cfg,
|
||||
obj_type: 'event_session',
|
||||
obj_id: event_session_id,
|
||||
view,
|
||||
log_lvl
|
||||
});
|
||||
|
||||
if (ae_promises.load__event_session_obj) {
|
||||
if (try_cache) {
|
||||
const processed_obj_li = await process_ae_obj__event_session_props({
|
||||
obj_li: [ae_promises.load__event_session_obj],
|
||||
log_lvl
|
||||
});
|
||||
await db_save_ae_obj_li__ae_obj({
|
||||
db_instance: db_events,
|
||||
table_name: 'session',
|
||||
obj_li: processed_obj_li,
|
||||
properties_to_save,
|
||||
log_lvl
|
||||
// 1. FAST PATH: Return cached data immediately
|
||||
if (try_cache) {
|
||||
try {
|
||||
const cached = await db_events.session.get(event_session_id);
|
||||
if (cached) {
|
||||
if (log_lvl) console.log('SESSION LOAD: Cache hit. Returning stale data.');
|
||||
_refresh_session_id_background({
|
||||
api_cfg, event_session_id, view, try_cache,
|
||||
inc_file_li, inc_all_file_li, inc_presentation_li, inc_presenter_li,
|
||||
enabled, hidden, limit, offset, log_lvl: 0
|
||||
});
|
||||
return await _handle_nested_loads(cached, { api_cfg, inc_file_li, inc_all_file_li, inc_presentation_li, inc_presenter_li, enabled, hidden, limit, offset, try_cache, log_lvl });
|
||||
}
|
||||
} else if (try_cache) {
|
||||
ae_promises.load__event_session_obj = await db_events.session.get(event_session_id);
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.log('V3 Request failed.', error);
|
||||
if (try_cache) {
|
||||
ae_promises.load__event_session_obj = await db_events.session.get(event_session_id);
|
||||
}
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
if (!ae_promises.load__event_session_obj) return null;
|
||||
|
||||
return await _handle_nested_loads(ae_promises.load__event_session_obj, {
|
||||
api_cfg, inc_file_li, inc_all_file_li, inc_presentation_li, inc_presenter_li, enabled, hidden, limit, offset, try_cache, log_lvl
|
||||
// 2. SLOW PATH: Wait for API
|
||||
return await _refresh_session_id_background({
|
||||
api_cfg, event_session_id, view, try_cache,
|
||||
inc_file_li, inc_all_file_li, inc_presentation_li, inc_presenter_li,
|
||||
enabled, hidden, limit, offset, log_lvl
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Internal background refresh for a single session
|
||||
*/
|
||||
async function _refresh_session_id_background({ api_cfg, event_session_id, view, try_cache, inc_file_li, inc_all_file_li, inc_presentation_li, inc_presenter_li, enabled, hidden, limit, offset, log_lvl }: any) {
|
||||
if (typeof navigator !== 'undefined' && !navigator.onLine) return null;
|
||||
try {
|
||||
const result = await api.get_ae_obj_v3({ api_cfg, obj_type: 'event_session', obj_id: event_session_id, view, log_lvl });
|
||||
if (result) {
|
||||
if (try_cache) {
|
||||
const processed = await process_ae_obj__event_session_props({ obj_li: [result], log_lvl });
|
||||
await db_save_ae_obj_li__ae_obj({ db_instance: db_events, table_name: 'session', obj_li: processed, properties_to_save, log_lvl });
|
||||
}
|
||||
return await _handle_nested_loads(result, { api_cfg, inc_file_li, inc_all_file_li, inc_presentation_li, inc_presenter_li, enabled, hidden, limit, offset, try_cache, log_lvl });
|
||||
}
|
||||
} catch (e) {}
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper to handle nested collection loads for a session
|
||||
*/
|
||||
async function _handle_nested_loads(session_obj: any, { api_cfg, inc_file_li, inc_all_file_li, inc_presentation_li, inc_presenter_li, enabled, hidden, limit, offset, try_cache, log_lvl }: any) {
|
||||
const current_session_id = session_obj.event_session_id_random || session_obj.event_session_id || session_obj.id;
|
||||
|
||||
const tasks = [];
|
||||
if (inc_file_li) {
|
||||
session_obj.event_file_li = await load_ae_obj_li__event_file({
|
||||
api_cfg,
|
||||
for_obj_type: 'event_session',
|
||||
for_obj_id: current_session_id,
|
||||
enabled,
|
||||
limit: 15,
|
||||
try_cache,
|
||||
log_lvl
|
||||
});
|
||||
tasks.push(load_ae_obj_li__event_file({
|
||||
api_cfg, for_obj_type: 'event_session', for_obj_id: current_session_id,
|
||||
enabled, limit: 15, try_cache, log_lvl
|
||||
}).then(res => session_obj.event_file_li = res));
|
||||
}
|
||||
|
||||
if (inc_presentation_li) {
|
||||
session_obj.event_presentation_li = await load_ae_obj_li__event_presentation({
|
||||
api_cfg,
|
||||
for_obj_type: 'event_session',
|
||||
for_obj_id: current_session_id,
|
||||
inc_file_li: inc_all_file_li,
|
||||
inc_presenter_li,
|
||||
enabled,
|
||||
hidden,
|
||||
limit,
|
||||
offset,
|
||||
try_cache,
|
||||
log_lvl
|
||||
});
|
||||
tasks.push(load_ae_obj_li__event_presentation({
|
||||
api_cfg, for_obj_type: 'event_session', for_obj_id: current_session_id,
|
||||
inc_file_li: inc_all_file_li, inc_presenter_li, enabled, hidden, limit, offset, try_cache, log_lvl
|
||||
}).then(res => session_obj.event_presentation_li = res));
|
||||
}
|
||||
|
||||
if (tasks.length > 0) await Promise.all(tasks);
|
||||
return session_obj;
|
||||
}
|
||||
|
||||
// Updated 2026-01-20 to V3
|
||||
// Updated 2026-01-26 (SWR Optimization)
|
||||
export async function load_ae_obj_li__event_session({
|
||||
api_cfg,
|
||||
for_obj_type = 'event',
|
||||
@@ -172,72 +150,50 @@ export async function load_ae_obj_li__event_session({
|
||||
log_lvl?: number;
|
||||
}): Promise<ae_EventSession[]> {
|
||||
if (log_lvl) {
|
||||
console.log(`*** load_ae_obj_li__event_session() *** [V3] for=${for_obj_type}:${for_obj_id}`);
|
||||
console.log(`*** load_ae_obj_li__event_session() *** [V3] for=${for_obj_type}:${for_obj_id} (SWR)`);
|
||||
}
|
||||
|
||||
// Check if offline
|
||||
if (typeof navigator !== 'undefined' && !navigator.onLine) {
|
||||
if (log_lvl) console.log('Browser is offline. Skipping API and attempting cache load.');
|
||||
ae_promises.load__event_session_obj_li = await db_events.session
|
||||
.where('for_id').equals(for_obj_id)
|
||||
.toArray();
|
||||
if (ae_promises.load__event_session_obj_li) {
|
||||
for (const session of ae_promises.load__event_session_obj_li) {
|
||||
await _handle_nested_loads(session, { api_cfg, inc_file_li, inc_all_file_li, inc_presentation_li, inc_presenter_li, enabled, hidden, limit, offset, try_cache, log_lvl });
|
||||
// 1. FAST PATH: Check cache
|
||||
if (try_cache) {
|
||||
try {
|
||||
const cached_li = await db_events.session.where('for_id').equals(for_obj_id).toArray();
|
||||
if (cached_li && cached_li.length > 0) {
|
||||
if (log_lvl) console.log(`SESSION LIST: Cache hit (${cached_li.length}). Returning stale data.`);
|
||||
_refresh_session_li_background({
|
||||
api_cfg, for_obj_type, for_obj_id, inc_file_li, inc_all_file_li, inc_presentation_li, inc_presenter_li,
|
||||
enabled, hidden, limit, offset, order_by_li, try_cache, log_lvl: 0
|
||||
});
|
||||
for (const s of cached_li) {
|
||||
await _handle_nested_loads(s, { api_cfg, inc_file_li, inc_all_file_li, inc_presentation_li, inc_presenter_li, enabled, hidden, limit, offset, try_cache, log_lvl });
|
||||
}
|
||||
return cached_li;
|
||||
}
|
||||
}
|
||||
return ae_promises.load__event_session_obj_li || [];
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
// 2. SLOW PATH: API
|
||||
return await _refresh_session_li_background({
|
||||
api_cfg, for_obj_type, for_obj_id, inc_file_li, inc_all_file_li, inc_presentation_li, inc_presenter_li,
|
||||
enabled, hidden, limit, offset, order_by_li, try_cache, log_lvl
|
||||
});
|
||||
}
|
||||
|
||||
async function _refresh_session_li_background({ api_cfg, for_obj_type, for_obj_id, inc_file_li, inc_all_file_li, inc_presentation_li, inc_presenter_li, enabled, hidden, limit, offset, order_by_li, try_cache, log_lvl }: any) {
|
||||
if (typeof navigator !== 'undefined' && !navigator.onLine) return [];
|
||||
try {
|
||||
ae_promises.load__event_session_obj_li = await api.get_ae_obj_li_v3({
|
||||
api_cfg,
|
||||
obj_type: 'event_session',
|
||||
for_obj_type,
|
||||
for_obj_id,
|
||||
enabled,
|
||||
hidden,
|
||||
limit,
|
||||
offset,
|
||||
order_by_li,
|
||||
log_lvl
|
||||
});
|
||||
|
||||
if (ae_promises.load__event_session_obj_li) {
|
||||
const result_li = await api.get_ae_obj_li_v3({ api_cfg, obj_type: 'event_session', for_obj_type, for_obj_id, enabled, hidden, limit, offset, order_by_li, log_lvl });
|
||||
if (result_li) {
|
||||
if (try_cache) {
|
||||
const processed_obj_li = await process_ae_obj__event_session_props({
|
||||
obj_li: ae_promises.load__event_session_obj_li,
|
||||
log_lvl
|
||||
});
|
||||
await db_save_ae_obj_li__ae_obj({
|
||||
db_instance: db_events,
|
||||
table_name: 'session',
|
||||
obj_li: processed_obj_li,
|
||||
properties_to_save,
|
||||
log_lvl
|
||||
});
|
||||
const processed = await process_ae_obj__event_session_props({ obj_li: result_li, log_lvl });
|
||||
await db_save_ae_obj_li__ae_obj({ db_instance: db_events, table_name: 'session', obj_li: processed, properties_to_save, log_lvl });
|
||||
}
|
||||
} else if (try_cache) {
|
||||
ae_promises.load__event_session_obj_li = await db_events.session
|
||||
.where('for_id').equals(for_obj_id)
|
||||
.toArray();
|
||||
for (const s of result_li) {
|
||||
await _handle_nested_loads(s, { api_cfg, inc_file_li, inc_all_file_li, inc_presentation_li, inc_presenter_li, enabled, hidden, limit, offset, try_cache, log_lvl });
|
||||
}
|
||||
return result_li;
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.log('V3 List Request failed.', error);
|
||||
if (try_cache) {
|
||||
ae_promises.load__event_session_obj_li = await db_events.session
|
||||
.where('for_id').equals(for_obj_id)
|
||||
.toArray();
|
||||
}
|
||||
}
|
||||
|
||||
if (ae_promises.load__event_session_obj_li) {
|
||||
for (const session of ae_promises.load__event_session_obj_li) {
|
||||
await _handle_nested_loads(session, { api_cfg, inc_file_li, inc_all_file_li, inc_presentation_li, inc_presenter_li, enabled, hidden, limit, offset, try_cache, log_lvl });
|
||||
}
|
||||
}
|
||||
|
||||
return ae_promises.load__event_session_obj_li || [];
|
||||
} catch (e) {}
|
||||
return [];
|
||||
}
|
||||
|
||||
// Updated 2026-01-20 to V3
|
||||
|
||||
Reference in New Issue
Block a user