I am not really sure... I just want it to load correctly.

src/lib/element_data_store.svelte

@@ -69,7 +69,7 @@ console.log(`ae_e_data_store cached: ${ds_code} = `, $ae_ds_loc);
 if (!$ae_ds_loc.id) {
     ds_loading_status = '-- loading --';
 } else {
-    ae_ds_loc.set($ae_ds_loc);
+    // ae_ds_loc.set($ae_ds_loc);
 }
 
 $ae_sess.ds.submit_status = null;
@@ -80,6 +80,12 @@ let trigger: null|string = null;
 
 import { browser } from '$app/environment';
 
+if (browser) {
+    console.log('ae_ Browser detected.');
+} else {
+    console.log('ae_ Browser not detected.');
+}
+
 // This is a quick check to make sure the data store is not stale. If it is, then we need to trigger a reload.
 if (browser && $ae_ds_loc.loaded_on && $ae_ds_loc.chk_account_id == $ae_loc.account_id) {
     console.log(`ae_data_store ${ds_code} loaded_on: ${$ae_ds_loc.loaded_on}`);
@@ -108,9 +114,10 @@ if (!$ae_ds_loc.account_id === null || $ae_loc.account_id == $ae_loc.account_id)
 
 onMount(() => {
     console.log('Element: Data Store element_data_store.svelte');
+    // console.log('ae_ MOUNTED Browser detected.');
 
     // Wait for random number of milliseconds to avoid all data stores being reloaded at the same time.
-    let random_ms = Math.floor(Math.random() * 750);
+    let random_ms = Math.floor(Math.random() * 1500);
     console.log(`Random number of milliseconds: ${random_ms}`);
     setTimeout(() => {
         trigger = 'load__ds__code';

src/routes/+layout.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 /** @type {import('./$types').LayoutData} */
 export let data: any;
-console.log(`ae_ Svelte root +layout data:`, data);
+// console.log(`ae_ Svelte root +layout data:`, data);
 
 import { onMount } from 'svelte';
 import '../app.postcss';
@@ -55,15 +55,20 @@ import { api } from '$lib/api';
 import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
 import { events_loc, events_slct } from '$lib/ae_events_stores';
 import type { key_val } from '$lib/ae_stores';
-console.log($ae_loc, $ae_sess, $ae_api);
+// console.log($ae_loc, $ae_sess, $ae_api);
 
 import Element_access_type from '$lib/element_access_type.svelte';
 import Element_app_cfg from '$lib/element_app_cfg.svelte';
 import Element_data_store from '$lib/element_data_store.svelte';
 
 // Quickly save the data passed from the parent(s) to the Svelte stores, localStorage, and other. This should catch anything that is a child of this layout.svelte file.
-$ae_loc = data.ae_loc;
+$slct.account_id = data.account_id;
-$ae_api = data.ae_api;
+console.log(`$slct.account_id = `, $slct.account_id);
+let ae_acct = data.ae_acct[$slct.account_id];
+console.log(`ae_acct = `, ae_acct);
+// let ae_acct = data.ae_acct;
+// $ae_loc = ae_acct.loc;
+// $ae_api = ae_acct.api;
 
 if ($ae_loc.site_cfg_json.slct__event_id) {
     $events_slct.event_id = $ae_loc.site_cfg_json.slct__event_id;
@@ -80,8 +85,8 @@ if ($ae_loc.site_cfg_json.slct__event_id) {
 
 if (browser) {
     // Waiting until the browser exists.
-    // save_ds_to_local(data.ae_ds);
+    // save_ds_to_local(ae_acct.ds);
-    let ae_ds = data.ae_ds;
+    let ae_ds = ae_acct.ds;
     console.log(`ae_ds__ data:`, ae_ds)
     for (let [key, value] of Object.entries(ae_ds)) {
         console.log(`ae_ds__ key: ${key}, value:`, value);
@@ -99,9 +104,9 @@ if (browser) {
 }
 
 // We want to loop through all of the data store (ds) key value pairs and set them to localStorage
-// $: if (data.ae_ds) {
+// $: if (ae_acct.ds) {
-//     console.log(`ae_ds__ data:`, data.ae_ds)
+//     console.log(`ae_ds__ data:`, ae_acct.ds)
-//     for (let [key, value] of Object.entries(data.ae_ds)) {
+//     for (let [key, value] of Object.entries(ae_acct.ds)) {
 //         console.log(`ae_ds__ key: ${key}, value:`, value);
 //         localStorageStore(`ae_ds__${key}`, value);
 //     }
@@ -113,7 +118,7 @@ onMount(() => {
     console.log('Root: +layout.svelte');
 
     // Waiting until the browser exists.
-    // save_ds_to_local(data.ae_ds);
+    // save_ds_to_local(ae_acct.ds);
 
     // $ae_sess.site_appshell_header = JSON.parse(localStorage.getItem('ae_ds__hub__site__appshell_header'));
     // console.log(`$ae_sess.site_appshell_header = `, $ae_sess.site_appshell_header);
@@ -170,8 +175,8 @@ onMount(() => {
 
 
 <svelte:head>
-	<title>{data.ae_loc.title}</title>
+	<title>{ae_acct.loc.title}</title>
-    <link rel="stylesheet" href="{data.ae_loc.site_style_href}">
+    <link rel="stylesheet" href="{ae_acct.loc.site_style_href}">
     <!-- <link rel="manifest" href="/manifest.json"> -->
 </svelte:head>
 

src/routes/+layout.ts

@@ -18,17 +18,39 @@ export async function load({ fetch, params, parent, route, url }) { // params, r
     // console.log(`Svelte root layout.ts route:`, route);
     // console.log(`Svelte root layout.ts url:`, url);
 
+    let ae_acct: key_val = {
+        api: {},
+        ds: {},
+        loc: {
+            'account_id': '',
+            'site_id': '',
+            'site_domain_id': '',
+            'iframe': false,
+        },
+        sess: {},
+        slct: {},
+    }
+
     let ae_loc_tmp = get(ae_loc);
     // console.log(`ae_loc = `, ae_loc_tmp);
 
     let ae_api_tmp = get(ae_api);
-    console.log(`ae_api = `, ae_api_tmp);
+    // console.log(`ae_api = `, ae_api_tmp);
 
-    let ds_code_li: null|key_val = ae_loc_tmp.ds;
+    let ds_code_li: null|key_val = null;
+    if (ae_loc_tmp && ae_loc_tmp.ds) {
+        ds_code_li = ae_loc_tmp.ds;
+    }
     // console.log(`ae_ ds_code_li = `, ds_code_li);
     let ds_code: null|string = null;
 
     let data_struct = {
+        // ae_acct should only be updated and referenced by the corresponding account_id.
+        ae_acct: {
+            // '_XY7DXtc9MY': ae_acct,
+        },
+        account_id: null,
+
         ae_loc: ae_loc_tmp,
         ae_api: ae_api_tmp,
         ae_ds: {},
@@ -79,6 +101,10 @@ export async function load({ fetch, params, parent, route, url }) { // params, r
         if (site_domain_results) {
             // console.log(`ae_ site_domain_results = `, site_domain_results);
 
+            data_struct.account_id = site_domain_results.account_id_random;
+
+            ae_acct.account_id = site_domain_results.account_id_random;
+
             // ae_api_tmp = get(ae_api);
 
             ae_api_tmp['account_id'] = site_domain_results.account_id_random;
@@ -108,7 +134,7 @@ export async function load({ fetch, params, parent, route, url }) { // params, r
     ds_code_li[ds_code] = await core_func.handle_load_ae_obj_code__data_store({api_cfg: ae_api_tmp, code: ds_code, data_type: ds_type})
     .then(function (ds_results) {
         if (ds_results) {
-            console.log(`ae_ ds_results = `, ds_results);
+            // console.log(`ae_ ds_results = `, ds_results);
             return ds_results;
         }
 
@@ -127,9 +153,16 @@ export async function load({ fetch, params, parent, route, url }) { // params, r
     // }
     // );
 
-    data_struct['ae_ds'] = ds_code_li;
+
     ae_loc_tmp['page_access_code_li'] = ds_code_li['hub__page__access_code_li_json'];
-    data_struct['ae_loc'] = ae_loc_tmp;
+
+    ae_acct['api'] = ae_api_tmp;
+    ae_acct['loc'] = ae_loc_tmp;
+    ae_acct['ds'] = ds_code_li;
+    console.log(`ae_acct = `, ae_acct);
+
+    data_struct.ae_acct[ae_loc_tmp.account_id] = ae_acct;
+    // data_struct.ae_acct = ae_acct;
 
     return data_struct;
 }