perf(events): refactor load functions to be non-blocking
- Eliminated blocking 'await' calls in '+page.ts' for main Events, Session, Location, and Presenter views. - Implemented Stale-While-Revalidate (SWR) pattern: pages now render instantly using cached IndexedDB data while API refreshes run in the background. - Removed expensive sequential loops in load functions, allowing the reactive UI (via LiveQuery) to handle data arrival as background tasks complete.
This commit is contained in:
@@ -22,50 +22,32 @@ export async function load({ parent }) {
|
||||
}
|
||||
|
||||
if (browser) {
|
||||
if (event_id) {
|
||||
// let ae_params = {};
|
||||
if (log_lvl) console.log(`ae_events +page.ts (Non-Blocking Refresh)`);
|
||||
|
||||
const load_event_obj_li = await events_func.load_ae_obj_id__event({
|
||||
if (event_id) {
|
||||
// Refresh the specific selected event
|
||||
events_func.load_ae_obj_id__event({
|
||||
api_cfg: ae_acct.api,
|
||||
event_id: event_id,
|
||||
log_lvl: log_lvl
|
||||
});
|
||||
ae_acct.slct.event_obj_li = load_event_obj_li;
|
||||
}
|
||||
|
||||
const load_event_obj_li = await events_func.load_ae_obj_li__event({
|
||||
// Refresh the list of events for the account
|
||||
events_func.load_ae_obj_li__event({
|
||||
api_cfg: ae_acct.api,
|
||||
for_obj_type: 'account',
|
||||
for_obj_id: account_id,
|
||||
inc_session_li: true,
|
||||
hidden: 'all', // 'not_hidden'
|
||||
enabled: 'enabled',
|
||||
// order_by_li: {'priority': 'DESC', 'sort': 'DESC', 'name': 'ASC', 'updated_on': 'DESC', 'created_on': 'DESC'},
|
||||
limit: 25,
|
||||
// params: ae_params,
|
||||
try_cache: true,
|
||||
log_lvl: log_lvl
|
||||
});
|
||||
ae_acct.slct.event_obj_li = load_event_obj_li;
|
||||
}
|
||||
|
||||
parent_data[account_id] = ae_acct;
|
||||
|
||||
return parent_data;
|
||||
|
||||
// let ae_acct = parent_data[account_id];
|
||||
|
||||
// Should we limit these to event.conference = true?
|
||||
// let load_event_obj_li = await events_func.load_ae_obj_li__event({
|
||||
// api_cfg: ae_acct.api,
|
||||
// account_id: account_id,
|
||||
// params: {enabled: 'enabled', qry__limit: 25},
|
||||
// try_cache: false,
|
||||
// log_lvl: 1
|
||||
// });
|
||||
// ae_acct.slct.event_obj_li = load_event_obj_li;
|
||||
|
||||
// parent_data[account_id] = ae_acct;
|
||||
|
||||
// return parent_data;
|
||||
}
|
||||
|
||||
@@ -29,44 +29,32 @@ export async function load({ params, parent }) {
|
||||
ae_acct.slct.event_location_id = event_location_id;
|
||||
|
||||
if (browser && event_location_id) {
|
||||
// Load event location object
|
||||
const load_event_location_obj = await events_func.load_ae_obj_id__event_location({
|
||||
if (log_lvl) console.log(`ae_events [event_location_id] +page.ts (Non-Blocking Refresh)`);
|
||||
|
||||
// OPTIMIZATION: Fire these in the background without 'await'.
|
||||
// The Location View components use LiveQuery/Dexie and will update
|
||||
// automatically once these background tasks complete.
|
||||
|
||||
// 1. Refresh the location object
|
||||
events_func.load_ae_obj_id__event_location({
|
||||
api_cfg: ae_acct.api,
|
||||
event_location_id: event_location_id,
|
||||
try_cache: true
|
||||
});
|
||||
|
||||
ae_acct.slct.event_location_obj = load_event_location_obj;
|
||||
|
||||
// Load event sessions for the location
|
||||
const event_session_obj_li = await events_func.load_ae_obj_li__event_session({
|
||||
// 2. Refresh sessions and their nested presentations
|
||||
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_presentation_li: true,
|
||||
enabled: 'all',
|
||||
limit: 50,
|
||||
log_lvl: log_lvl
|
||||
});
|
||||
|
||||
if (event_session_obj_li) {
|
||||
for (let index = 0; index < event_session_obj_li.length; index++) {
|
||||
const event_session_obj = event_session_obj_li[index];
|
||||
const event_session_id = event_session_obj.event_session_id || event_session_obj.id;
|
||||
|
||||
const load_event_presentation_obj_li = await events_func.load_ae_obj_li__event_presentation({
|
||||
api_cfg: ae_acct.api,
|
||||
for_obj_type: 'event_session',
|
||||
for_obj_id: event_session_id,
|
||||
enabled: 'all',
|
||||
limit: 25,
|
||||
log_lvl: log_lvl
|
||||
});
|
||||
event_session_obj_li[index].event_presentation_li = load_event_presentation_obj_li;
|
||||
}
|
||||
}
|
||||
ae_acct.slct.event_session_obj_li = event_session_obj_li;
|
||||
|
||||
const load_event_file_obj_li = await events_func.load_ae_obj_li__event_file({
|
||||
// 3. Refresh files for the location
|
||||
events_func.load_ae_obj_li__event_file({
|
||||
api_cfg: ae_acct.api,
|
||||
for_obj_type: 'event_location',
|
||||
for_obj_id: event_location_id,
|
||||
@@ -75,15 +63,14 @@ export async function load({ params, parent }) {
|
||||
limit: 50,
|
||||
log_lvl: log_lvl
|
||||
});
|
||||
ae_acct.slct.event_file_obj_li = load_event_file_obj_li;
|
||||
|
||||
const load_event_device_obj_li = await events_func.load_ae_obj_li__event_device({
|
||||
// 4. Refresh devices for the location
|
||||
events_func.load_ae_obj_li__event_device({
|
||||
api_cfg: ae_acct.api,
|
||||
for_obj_type: 'event_location',
|
||||
for_obj_id: event_location_id,
|
||||
log_lvl: log_lvl
|
||||
});
|
||||
ae_acct.slct.event_device_obj_li = load_event_device_obj_li;
|
||||
}
|
||||
|
||||
// WARNING: Precaution against shared data between sites and sessions.
|
||||
|
||||
@@ -17,45 +17,33 @@ export async function load({ params, parent }) {
|
||||
// console.log(`ae_acct = `, ae_acct);
|
||||
|
||||
const event_presenter_id = params.presenter_id;
|
||||
// if (!event_presenter_id) {
|
||||
// console.log(`ae events_pres_mgmt presenter [presenter_id] +page.ts: The event_presenter_id was not found in the params.presenter_id!!!`);
|
||||
// return false;
|
||||
// }
|
||||
|
||||
ae_acct.slct.event_presenter_id = event_presenter_id;
|
||||
|
||||
if (browser) {
|
||||
// Load event presenter object
|
||||
const load_event_presenter_obj = events_func.load_ae_obj_id__event_presenter({
|
||||
if (log_lvl) console.log(`ae_events [presenter_id] +page.ts (Non-Blocking Refresh)`);
|
||||
|
||||
// OPTIMIZATION: Fire these in the background without 'await'.
|
||||
// The Presenter View components use LiveQuery/Dexie and will update
|
||||
// automatically once these background tasks complete.
|
||||
|
||||
// 1. Refresh the presenter object
|
||||
events_func.load_ae_obj_id__event_presenter({
|
||||
api_cfg: ae_acct.api,
|
||||
event_presenter_id: event_presenter_id,
|
||||
try_cache: true,
|
||||
log_lvl: log_lvl
|
||||
});
|
||||
|
||||
ae_acct.slct.event_presenter_obj = await load_event_presenter_obj;
|
||||
|
||||
// Load event files for the presenter
|
||||
const load_event_file_obj_li = await events_func
|
||||
.load_ae_obj_li__event_file({
|
||||
api_cfg: ae_acct.api,
|
||||
for_obj_type: 'event_presenter',
|
||||
for_obj_id: event_presenter_id,
|
||||
enabled: 'all',
|
||||
hidden: 'all',
|
||||
limit: 50,
|
||||
try_cache: true
|
||||
})
|
||||
.then((event_file_obj_li) => {
|
||||
if (log_lvl) {
|
||||
console.log(`event_file_obj_li = `, event_file_obj_li);
|
||||
}
|
||||
return event_file_obj_li;
|
||||
});
|
||||
if (log_lvl) {
|
||||
console.log(`load_event_file_obj_li = `, load_event_file_obj_li);
|
||||
}
|
||||
ae_acct.slct.event_file_obj_li = load_event_file_obj_li;
|
||||
// 2. Refresh files for the presenter
|
||||
events_func.load_ae_obj_li__event_file({
|
||||
api_cfg: ae_acct.api,
|
||||
for_obj_type: 'event_presenter',
|
||||
for_obj_id: event_presenter_id,
|
||||
enabled: 'all',
|
||||
hidden: 'all',
|
||||
limit: 150,
|
||||
try_cache: true
|
||||
});
|
||||
}
|
||||
|
||||
// WARNING: Precaution against shared data between sites and presentations.
|
||||
|
||||
@@ -16,11 +16,6 @@ export async function load({ params, parent }) {
|
||||
const ae_acct = data[account_id];
|
||||
// console.log(`ae_acct = `, ae_acct);
|
||||
|
||||
// if (!account_id) {
|
||||
// console.log(`ae events_pres_mgmt session [session_id] +page.ts: The account_id was not found in the data!!!`);
|
||||
// return false;
|
||||
// }
|
||||
|
||||
data.ae_events_pres_mgmt_event_session_id_page_ts = true;
|
||||
|
||||
const event_session_id = params.session_id;
|
||||
@@ -35,62 +30,42 @@ export async function load({ params, parent }) {
|
||||
ae_acct.slct.event_session_id = event_session_id;
|
||||
|
||||
if (browser) {
|
||||
// Load event session object
|
||||
const load_event_session_obj = await events_func.load_ae_obj_id__event_session({
|
||||
if (log_lvl) console.log(`ae_events [session_id] +page.ts (Non-Blocking Refresh)`);
|
||||
|
||||
// OPTIMIZATION: Fire these in the background without 'await'.
|
||||
// The Session View components use LiveQuery/Dexie and will update
|
||||
// automatically once these background tasks complete.
|
||||
|
||||
// 1. Refresh the core session object
|
||||
events_func.load_ae_obj_id__event_session({
|
||||
api_cfg: ae_acct.api,
|
||||
event_session_id: event_session_id,
|
||||
// inc_presentation_li: true,
|
||||
// inc_presenter_li: true,
|
||||
try_cache: true
|
||||
});
|
||||
|
||||
ae_acct.slct.event_session_obj = load_event_session_obj;
|
||||
|
||||
// Load event presentations for the session
|
||||
const event_presentation_obj_li = await events_func.load_ae_obj_li__event_presentation({
|
||||
// 2. Refresh presentations and their nested presenters
|
||||
events_func.load_ae_obj_li__event_presentation({
|
||||
api_cfg: ae_acct.api,
|
||||
for_obj_type: 'event_session',
|
||||
for_obj_id: event_session_id,
|
||||
inc_presenter_li: true,
|
||||
enabled: 'all',
|
||||
hidden: 'all',
|
||||
limit: 19,
|
||||
// params: {},
|
||||
limit: 150,
|
||||
try_cache: true,
|
||||
log_lvl: 2
|
||||
log_lvl: 0
|
||||
});
|
||||
|
||||
if (event_presentation_obj_li) {
|
||||
for (let index = 0; index < event_presentation_obj_li.length; index++) {
|
||||
const event_presentation_obj = event_presentation_obj_li[index];
|
||||
const event_presentation_id = event_presentation_obj.event_presentation_id || event_presentation_obj.id;
|
||||
|
||||
const load_event_presenter_obj_li = await events_func.load_ae_obj_li__event_presenter({
|
||||
api_cfg: ae_acct.api,
|
||||
for_obj_type: 'event_presentation',
|
||||
for_obj_id: event_presentation_id,
|
||||
enabled: 'all',
|
||||
hidden: 'all',
|
||||
limit: 19,
|
||||
try_cache: true,
|
||||
log_lvl: 2
|
||||
});
|
||||
event_presentation_obj_li[index].event_presenter_li = load_event_presenter_obj_li;
|
||||
}
|
||||
}
|
||||
ae_acct.slct.event_presentation_obj_li = event_presentation_obj_li;
|
||||
|
||||
// Load event files for the session
|
||||
const load_event_file_obj_li = await events_func.load_ae_obj_li__event_file({
|
||||
// 3. Refresh files for the session
|
||||
events_func.load_ae_obj_li__event_file({
|
||||
api_cfg: ae_acct.api,
|
||||
for_obj_type: 'event_session',
|
||||
for_obj_id: event_session_id,
|
||||
enabled: 'all',
|
||||
hidden: 'all',
|
||||
limit: 50,
|
||||
limit: 150,
|
||||
try_cache: true
|
||||
});
|
||||
ae_acct.slct.event_file_obj_li = load_event_file_obj_li;
|
||||
}
|
||||
|
||||
// WARNING: Precaution against shared data between sites and presentations.
|
||||
|
||||
Reference in New Issue
Block a user