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

perf(hydration): implement non-blocking load path for Launcher and Sessions

Browse Source 
- 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
2026-01-26 16:50:40 -05:00
parent 359eb9cf3f
commit 715cc7cb65
3 changed files with 109 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files

210
src/lib/ae_events/ae_events__event_session.ts
View File

@@ -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

93
src/routes/events/[event_id]/(launcher)/launcher/+layout.ts
View File

@@ -28,102 +28,27 @@ export async function load({ params, parent, url }) {
// console.log(`ae_acct = `, ae_acct);
const event_id = params.event_id;
// if (!event_id) {
// console.log(`ae Events - [event_id] +page.ts: The event_id was not found in the params.event_id!!!`);
// error(404, {
// message: 'Event ID not found'
// });
// }
// ae_acct.slct.event_id = event_id;
// let load_event_obj = events_func.handle_load_ae_obj_id__event({
// api_cfg: ae_acct.api, event_id: event_id, try_cache: true
// });
// ae_acct.slct.event_obj = await load_event_obj;
if (browser) {
console.log(`ae_events Launcher - [event_id] launcher +layout.ts start`);
if (log_lvl) console.log(`ae_events Launcher - [event_id] launcher +layout.ts (Non-Blocking)`);
// Load event object again, but with the event file list
// let load_event_obj = events_func.load_ae_obj_id__event({
// api_cfg: ae_acct.api,
// event_id: event_id,
// inc_file_li: true,
// log_lvl: log_lvl
// })
// .then((results) => {
// if (!results) {
// error(404, {
// message: 'Events Launcher - Event not found'
// });
// } else {
// // ae_acct.slct.event_obj = results;
// }
// });
const load_event_device_obj_li = events_func.load_ae_obj_li__event_device({
// OPTIMIZATION: Fire these in the background without 'await'.
// The UI components (menu, session_view) already use LiveQuery/Dexie
// and will automatically update when these background tasks save to IDB.
events_func.load_ae_obj_li__event_device({
api_cfg: ae_acct.api,
for_obj_type: 'event',
for_obj_id: event_id,
log_lvl: log_lvl
log_lvl: 0
});
const load_event_file_obj_li = events_func.load_ae_obj_li__event_file({
events_func.load_ae_obj_li__event_file({
api_cfg: ae_acct.api,
for_obj_type: 'event',
for_obj_id: event_id,
log_lvl: log_lvl
log_lvl: 0
});
// let load_event_obj = events_func.load_ae_obj_id__event({
// api_cfg: ae_acct.api, event_id: event_id, try_cache: true, log_lvl: 1
// });
// console.log(`load_event_obj = `, load_event_obj);
// ae_acct.slct.event_obj = load_event_obj;
// let load_event_session_obj_li = events_func.load_ae_obj_li__event_session({
// api_cfg: ae_acct.api,
// for_obj_type: 'event',
// for_obj_id: event_id,
// params: {qry__enabled: 'enabled', qry__hidden: 'all', qry__limit: 200},
// try_cache: true,
// log_lvl: 1
// });
// console.log(`load_event_session_obj_li = `, load_event_session_obj_li);
// ae_acct.slct.event_session_obj_li = load_event_session_obj_li;
// let load_event_location_obj_li = events_func.load_ae_obj_li__event_location({
// api_cfg: ae_acct.api,
// for_obj_type: 'event',
// for_obj_id: event_id,
// params: {qry__enabled: 'enabled', qry__hidden: 'all', qry__limit: 200},
// try_cache: true,
// log_lvl: log_lvl
// });
// console.log(`load_event_location_obj_li = `, load_event_location_obj_li);
// ae_acct.slct.event_location_obj_li = load_event_location_obj_li;
// let event_session_id = url.searchParams.get('session_id');
// if (event_session_id) {
// let load_event_session_obj = events_func.load_ae_obj_id__event_session({
// api_cfg: ae_acct.api,
// event_session_id: event_session_id,
// inc_file_li: true,
// inc_presentation_li: true,
// inc_presenter_li: true,
// try_cache: true,
// log_lvl: log_lvl
// });
// ae_acct.slct.event_session_id = event_session_id;
// console.log(`load_event_session_obj = `, load_event_session_obj);
// ae_acct.slct.event_session_obj = load_event_session_obj;
// }
}
// WARNING: Precaution against shared data between sites and sessions.
// data[account_id] = ae_acct;
return data;
}
}

68
src/routes/events/[event_id]/(launcher)/launcher/[event_location_id]/+page.ts
View File

@@ -43,57 +43,23 @@ export async function load({ params, parent, url }) {
event_location_id
);
}
// Load event_session object
// let load_event_session_obj_li = await events_func.load_ae_obj_li__event_session({
const load_event_session_obj_li = events_func
.load_ae_obj_li__event_session({
api_cfg: ae_acct.api,
for_obj_type: 'event_location',
for_obj_id: event_location_id,
inc_file_li: true, // Only include files directly under the session?
inc_all_file_li: true, // Also include files under presentations and presenters as well?
inc_presentation_li: true,
inc_presenter_li: true,
enabled: 'enabled',
hidden: 'all',
limit: 150,
log_lvl: log_lvl
})
.finally(() => {
// console.log(`load_event_session_obj_li = `, load_event_session_obj_li);
// ae_acct.trig.event_session_obj_li = false;
});
ae_acct.slct.event_session_obj_li = load_event_session_obj_li;
// console.log(`ae_acct.slct.event_session_obj_li = `, ae_acct.slct.event_session_obj_li);
// let id_li__event_session = [];
// let tmp_li = []; // This is to prevent the array from constantly updating and triggering the liveQuery.
// for (let i = 0; i < load_event_session_obj_li.length; i++) {
// let event_session_obj = load_event_session_obj_li[i];
// let event_session_id = event_session_obj.event_session_id;
// tmp_li.push(event_session_id);
// }
// id_li__event_session = tmp_li;
// console.log(`id_li__event_session:`, id_li__event_session);
// ae_acct.slct.id_li__event_session = id_li__event_session;
// This should only be needed if the session ID passed is not part of the location sessions.
// let event_session_id = url.searchParams.get('session_id');
// if (event_session_id) {
// let load_event_session_obj = await events_func.load_ae_obj_id__event_session({
// api_cfg: ae_acct.api,
// event_session_id: event_session_id,
// inc_file_li: true,
// inc_presentation_li: true,
// inc_presenter_li: true,
// log_lvl: log_lvl
// });
// ae_acct.slct.event_session_id = event_session_id;
// console.log(`load_event_session_obj = `, load_event_session_obj);
// ae_acct.slct.event_session_obj = load_event_session_obj;
// }
// OPTIMIZATION: Fire the session list refresh in the background.
// The Launcher components already use liveQuery to watch Dexie,
// so they will update automatically once this background task finishes.
events_func.load_ae_obj_li__event_session({
api_cfg: ae_acct.api,
for_obj_type: 'event_location',
for_obj_id: event_location_id,
inc_file_li: true,
inc_all_file_li: true,
inc_presentation_li: true,
inc_presenter_li: true,
enabled: 'enabled',
hidden: 'all',
limit: 150,
log_lvl: 0
});
} else {
console.log(`ae pres_mgmt launcher [slug] +page.ts: browser = false or location_id missing`);
}