Fix infinite hydration loop and stabilize global store synchronization
- Refactored layouts to derive account data from stable props instead of reactive stores. - Wrapped store updates in untrack() with deep equality guards to prevent infinite re-renders. - Resolved duplicate untrack declarations and missing imports across the project. - Added fetch safeguards to Element_data_store to prevent redundant API calls. - Standardized hydration patterns to break circular dependencies during initial load.
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { untrack } from 'svelte';
|
||||
let log_lvl: number = 0;
|
||||
|
||||
// *** Import Svelte specific
|
||||
@@ -31,19 +32,32 @@
|
||||
|
||||
let { data, children }: Props = $props();
|
||||
|
||||
if (log_lvl > 1) {
|
||||
console.log(`ae_idaa_recovery_meetings +layout.svelte`, data);
|
||||
}
|
||||
// NOTE: Derived from data.account_id (prop) instead of $slct.account_id (store)
|
||||
// to prevent circular dependency loops during hydration.
|
||||
let ae_acct = $derived(data[data.account_id]);
|
||||
|
||||
// *** Quickly pull out data from parent(s)
|
||||
$slct.account_id = data.account_id;
|
||||
$effect(() => {
|
||||
if (log_lvl > 1) {
|
||||
console.log(`ae_idaa_recovery_meetings +layout.svelte`, data);
|
||||
}
|
||||
|
||||
let ae_acct = data[$slct.account_id];
|
||||
if (log_lvl) {
|
||||
console.log(`ae_acct = `, ae_acct);
|
||||
}
|
||||
// *** Quickly pull out data from parent(s)
|
||||
untrack(() => {
|
||||
$slct.account_id = data.account_id;
|
||||
});
|
||||
});
|
||||
|
||||
$idaa_slct.event_obj_li = ae_acct.slct.event_obj_li;
|
||||
$effect(() => {
|
||||
if (log_lvl) {
|
||||
console.log(`ae_acct = `, ae_acct);
|
||||
}
|
||||
|
||||
if (ae_acct) {
|
||||
untrack(() => {
|
||||
$idaa_slct.event_obj_li = ae_acct.slct.event_obj_li;
|
||||
});
|
||||
}
|
||||
});
|
||||
// $idaa_slct.event_id = ae_acct.slct.event_id; // Not set here yet.
|
||||
|
||||
// *** Set initial variables
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { untrack } from 'svelte';
|
||||
interface Props {
|
||||
/** @type {import('./$types').PageData} */
|
||||
data: any;
|
||||
@@ -10,7 +11,6 @@
|
||||
// *** Import Svelte specific
|
||||
import { page } from '$app/state';
|
||||
import { browser } from '$app/environment';
|
||||
import { untrack } from 'svelte';
|
||||
|
||||
// *** Import other supporting libraries
|
||||
import { db_events } from '$lib/ae_events/db_events';
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
import Help_tech from '$lib/app_components/e_app_help_tech.svelte';
|
||||
|
||||
// *** Quickly pull out data from parent(s)
|
||||
let ae_acct = data[$slct.account_id];
|
||||
let ae_acct = data[data.account_id];
|
||||
if (log_lvl) {
|
||||
console.log(`ae_acct = `, ae_acct);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user