refactor(journals): stabilize reactive search and synchronize result counts

- Refactored 'src/routes/journals/[journal_id]/+page.svelte' to use a singleton 'liveQuery' observable, eliminating the search subscription loop.
- Synchronized entry counts in 'ae_comp__journal_obj_id_view.svelte' with the shared entries observable, ensuring accurate header feedback.
- Cleaned up 'ae_comp__journal_entry_obj_li.svelte' by removing redundant script blocks and hardening visibility filters.
- Restricted the result count badge to Edit Mode for a cleaner standard user interface.
- Improved initial load UX with localized spinners and proper undefined-state guards.

src/routes/journals/[journal_id]/+page.svelte

@@ -72,26 +72,63 @@
         })
     );
 
-    // Standardized Reactive Search Pattern (Aether UI V3)
+    // Stable LiveQuery Pattern (Aether UI V3)
-    $effect(() => {
+    // Shared across ID view and List Wrapper
-        // 1. Reactive Dependencies
+    let lq__journal_entry_obj_li = $derived.by(() => {
-        const qry_params = {
+        // 1. Capture dependencies for Svelte tracking
-            v: $journals_loc.entry.search_version,
+        const ids = search_id_li;
-            str: $journals_loc.entry.qry__search_text,
+        const journal_id = $lq__journal_obj?.journal_id;
-            cat: $journals_loc.entry.qry__category_code,
+        const search_text = $journals_loc.entry.qry__search_text;
-            limit: $journals_loc.entry.qry__limit,
+        const cat_code = $journals_loc.entry.qry__category_code;
-            enabled: $journals_loc.entry.qry__enabled,
+
-            hidden: $journals_loc.entry.qry__hidden,
+        // 2. Return the observable
-            journal_id: $journals_slct.journal_id,
+        return liveQuery(async () => {
-            person_id: $ae_loc.person_id
+            // SCENARIO 1: Specific IDs provided (Search Results)
-        };
+            if (Array.isArray(ids) && ids.length > 0) {
+                if (log_lvl) console.log(`Journal Page LQ: bulkGet ${ids.length} IDs`);
+                const results = await db_journals.journal_entry.bulkGet(ids);
+                return results.filter(item => item !== undefined);
+            }
+            
+            // SCENARIO 2: Fallback to broad search (Default view)
+            // Only if search is empty and we have a journal context
+            if (journal_id && !search_text && !cat_code) {
+                if (log_lvl) console.log(`Journal Page LQ: Fallback search for journal: ${journal_id}`);
+                return await db_journals.journal_entry
+                    .where('journal_id')
+                    .equals(journal_id)
+                    .reverse()
+                    .sortBy('tmp_sort_1');
+            }
+
+            return [];
+        });
+    });
+
+    // Standardized Reactive Search Pattern (Aether UI V3)
+    // 1. Isolate dependencies into a stable derived object
+    let search_params = $derived({
+        v: $journals_loc.entry.search_version,
+        str: ($journals_loc.entry.qry__search_text ?? '').toLowerCase().trim(),
+        cat: $journals_loc.entry.qry__category_code,
+        limit: $journals_loc.entry.qry__limit,
+        enabled: $journals_loc.entry.qry__enabled,
+        hidden: $journals_loc.entry.qry__hidden,
+        journal_id: $journals_slct.journal_id,
+        person_id: $ae_loc.person_id,
+        remote_first: $journals_loc.entry.qry__remote_first
+    });
+
+    // 2. Controlled effect for triggering searches
+    $effect(() => {
+        // Track specifically the isolated search params
+        const params = search_params;
 
-        // 2. Debounce Logic
         if (search_debounce_timer) clearTimeout(search_debounce_timer);
         search_debounce_timer = setTimeout(() => {
-            // 3. Execution (Untracked to prevent loops)
+            // Execution MUST be untracked to prevent circular triggers
             untrack(() => {
-                handle_search_refresh();
+                handle_search_refresh(params);
             });
         }, 250);
 
@@ -100,11 +137,10 @@
         };
     });
 
-    async function handle_search_refresh() {
+    async function handle_search_refresh(params: any) {
         const current_search_id = ++last_search_id;
-        const journal_id = $journals_slct.journal_id;
+        const journal_id = params.journal_id;
-        const person_id = $ae_loc.person_id;
+        const remote_first = params.remote_first;
-        const remote_first = $journals_loc.entry.qry__remote_first;
         
         if (log_lvl) console.log(`[Journal Search #${current_search_id}] Refreshing entries (remote=${remote_first}, journal=${journal_id})...`);
         
@@ -114,8 +150,8 @@
             search_id_li = [];
         }
         
-        const qry_str = ($journals_loc.entry.qry__search_text ?? '').toLowerCase().trim();
+        const qry_str = params.str;
-        const cat_code = $journals_loc.entry.qry__category_code;
+        const cat_code = params.cat;
 
         let local_ids: string[] = [];
 
@@ -164,9 +200,9 @@
                 person_id: null,
                 qry_str: qry_str || null,
                 qry_category_code: cat_code || null,
-                enabled: $journals_loc.entry.qry__enabled,
+                enabled: params.enabled,
-                hidden: $journals_loc.entry.qry__hidden,
+                hidden: params.hidden,
-                limit: $journals_loc.entry.qry__limit,
+                limit: params.limit,
                 log_lvl: 0
             });
 
@@ -198,6 +234,8 @@
     if (browser) {
         window.parent.postMessage({ journal_id: $journals_slct?.journal_id ?? null }, '*');
     }
+
+    import { LoaderCircle } from 'lucide-svelte';
 </script>
 
 <svelte:head>
@@ -206,16 +244,23 @@
     </title>
 </svelte:head>
 
-{#if $ae_loc.person_id == $lq__journal_obj?.person_id}
+{#if $lq__journal_obj === undefined}
+    <div class="flex flex-col items-center justify-center p-20 opacity-50">
+        <LoaderCircle size="3em" class="animate-spin mb-4" />
+        <p class="text-xl">Loading Journal...</p>
+    </div>
+{:else if $ae_loc.person_id == $lq__journal_obj?.person_id}
     <AeCompJournalObjIdView
         {lq__journal_obj}
+        {lq__journal_entry_obj_li}
         on_show_export={() => show_export_modal = true}
         on_show_import={() => show_import_modal = true}
     />
 
     <Journal_entry_obj_li_wrapper 
         {lq__journal_obj} 
-        {search_id_li} 
+        {lq__journal_entry_obj_li}
+        show_found_header={false}
         {log_lvl} 
     />
 

src/routes/journals/ae_comp__journal_entry_obj_li.svelte

@@ -3,9 +3,15 @@
         log_lvl?: number;
         lq__journal_obj: any;
         lq__journal_entry_obj_li: any;
+        show_found_header?: boolean;
     }
 
-    let { log_lvl = $bindable(0), lq__journal_obj, lq__journal_entry_obj_li }: Props = $props();
+    let { 
+        log_lvl = $bindable(0), 
+        lq__journal_obj, 
+        lq__journal_entry_obj_li,
+        show_found_header = true
+    }: Props = $props();
 
     // *** Import Svelte specific
     import { goto } from '$app/navigation';
@@ -30,7 +36,9 @@
         Siren,
         Tags,
         TypeOutline,
-        X
+        X,
+        LoaderCircle,
+        BookOpenText
     } from 'lucide-svelte';
 
     // *** Import Aether specific variables and functions
@@ -75,9 +83,12 @@
     // Derived list of visible items (Standardized Search Pattern 2026-01-27)
     // Ensures count matches exactly what is rendered to the user
     let visible_journal_entry_obj_li = $derived((() => {
+        // Subscribe to the observable
         const list = $lq__journal_entry_obj_li;
         
-        if (!list || !Array.isArray(list)) return [];
+        // Return null to signify 'loading' vs [] for 'empty'
+        if (list === undefined || list === null) return null;
+        if (!Array.isArray(list)) return [];
         
         const filtered = list.filter((item: any) => {
             if (!item) return false;
@@ -100,15 +111,23 @@
 </script>
 
 <section class="journal_list flex flex-col gap-1 md:gap-2 items-center justify-center w-full">
-    {#if visible_journal_entry_obj_li && visible_journal_entry_obj_li.length}
+    {#if visible_journal_entry_obj_li === null}
-        <div class="w-full max-w-(--breakpoint-lg) mb-2">
+        <!-- Loading state -->
-            <h2 class="h4 flex items-center gap-2 px-2">
+        <div class="flex flex-col items-center justify-center p-10 opacity-50">
-                <span class="text-sm text-gray-500 font-normal"> Found: </span>
+            <LoaderCircle size="2em" class="animate-spin mb-2" />
-                <span class="badge preset-tonal-success font-bold text-lg px-3 py-1">
+            <p>Loading visible entries...</p>
-                    {visible_journal_entry_obj_li.length}<span class="text-gray-400 dark:text-gray-600">&times;</span>
-                </span>
-            </h2>
         </div>
+    {:else if visible_journal_entry_obj_li.length > 0}
+        {#if show_found_header}
+            <div class="w-full max-w-(--breakpoint-lg) mb-2">
+                <h2 class="h4 flex items-center gap-2 px-2">
+                    <span class="text-sm text-gray-500 font-normal"> Found: </span>
+                    <span class="badge preset-tonal-success font-bold text-lg px-3 py-1">
+                        {visible_journal_entry_obj_li.length}<span class="text-gray-400 dark:text-gray-600">&times;</span>
+                    </span>
+                </h2>
+            </div>
+        {/if}
 
         {#each visible_journal_entry_obj_li as journals_journal_entry_obj, index}
             <div
@@ -411,7 +430,10 @@
                             href="/journals/{journals_journal_entry_obj?.journal_id ??
                                 $lq__journal_obj?.journal_id}/entry/{journals_journal_entry_obj?.journal_entry_id}"
                             class="btn preset-tonal-primary border border-primary-500 hover:preset-filled-primary-500 transition"
-                            title={`View ID: ${journals_journal_entry_obj?.id}\n${journals_journal_entry_obj?.name ?? ae_util.iso_datetime_formatter(journals_journal_entry_obj.created_on, 'datetime_iso_12_no_seconds')}\nJournal ID: ${journals_journal_entry_obj?.journal_id}\n`}
+                            title={`View ID: ${journals_journal_entry_obj?.id}
+${journals_journal_entry_obj?.name ?? ae_util.iso_datetime_formatter(journals_journal_entry_obj.created_on, 'datetime_iso_12_no_seconds')}
+Journal ID: ${journals_journal_entry_obj?.journal_id}
+`}
                         >
                             <NotebookPen class="mx-1 inline-block" />
                             <span class="hidden md:inline"> View </span>
@@ -527,8 +549,8 @@
                             )}
                         </span>
                         <span
-                            class="journal_entry__updated_on"
                             class:hidden={!journals_journal_entry_obj.updated_on}
+                            class="journal_entry__updated_on"
                         >
                             Last update:
                             {ae_util.iso_datetime_formatter(
@@ -595,6 +617,9 @@
             />
         {/if}
     {:else}
-        <p>No &AElig; Journal Entry available to show. Please check the query filters or create a new Entry.</p>
+        <div class="flex flex-col items-center justify-center p-10 opacity-50 text-center">
+            <BookOpenText size="3em" class="mb-2 opacity-20 mx-auto" />
+            <p>No Journal Entry available to show. Please check the query filters or create a new Entry.</p>
+        </div>
     {/if}
 </section>

src/routes/journals/ae_comp__journal_entry_obj_li_wrapper.svelte

@@ -1,65 +1,37 @@
 <script lang="ts">
     interface Props {
         container_class_li?: string | Array<string>;
-        search_id_li?: Array<string>;
         lq__journal_obj: any;
+        lq__journal_entry_obj_li: any;
+        show_found_header?: boolean;
         log_lvl?: number;
     }
 
     let {
         container_class_li = '',
-        search_id_li = [],
         lq__journal_obj,
+        lq__journal_entry_obj_li,
+        show_found_header = true,
         log_lvl = 0
     }: Props = $props();
 
     // *** Import other supporting libraries
-    import { liveQuery } from 'dexie';
+    import { LoaderCircle } from 'lucide-svelte';
-    import { db_journals } from '$lib/ae_journals/db_journals';
-    import { journals_loc } from '$lib/ae_journals/ae_journals_stores';
 
     // *** Import Aether specific components
     import Journal_entry_obj_li from './ae_comp__journal_entry_obj_li.svelte';
-
-    // Stable LiveQuery Pattern (Aether UI V3)
-    // Wrapped in $derived to ensure the query refreshes when IDs or filters change
-    let lq__journal_entry_obj_li = $derived(
-        liveQuery(async () => {
-            const ids = search_id_li;
-            const journal_id = $lq__journal_obj?.journal_id;
-            
-            // SCENARIO 1: Specific IDs provided (Search Results)
-            if (Array.isArray(ids) && ids.length > 0) {
-                if (log_lvl) console.log(`Journal Wrapper LQ: bulkGet ${ids.length} IDs`);
-                const results = await db_journals.journal_entry.bulkGet(ids);
-                return results.filter(item => item !== undefined);
-            }
-            
-            // SCENARIO 2: Fallback to broad search (Default view)
-            // Only if search is empty and we have a journal context
-            if (journal_id && !$journals_loc.entry.qry__search_text && !$journals_loc.entry.qry__category_code) {
-                if (log_lvl) console.log(`Journal Wrapper LQ: Fallback search for journal: ${journal_id}`);
-                return await db_journals.journal_entry
-                    .where('journal_id')
-                    .equals(journal_id)
-                    .reverse()
-                    .sortBy('tmp_sort_1');
-            }
-
-            return [];
-        })
-    );
 </script>
 
 {#if $lq__journal_entry_obj_li}
     <Journal_entry_obj_li 
         {lq__journal_obj} 
         {lq__journal_entry_obj_li} 
+        {show_found_header}
         {log_lvl}
     />
 {:else}
     <div class="flex flex-col items-center justify-center p-10 opacity-50">
-        <span class="fas fa-spinner fa-spin fa-2x mb-2"></span>
+        <LoaderCircle size="2em" class="animate-spin mb-2" />
         <p>Loading entries...</p>
     </div>
 {/if}

src/routes/journals/ae_comp__journal_obj_id_view.svelte

@@ -3,7 +3,7 @@
     import { goto } from '$app/navigation';
 
     // *** Import other supporting libraries
-    import { BookPlus, BookOpenText, FilePlus, Menu, Pencil, FileDown, FileUp, Settings } from 'lucide-svelte';
+    import { BookPlus, BookOpenText, FilePlus, Menu, Pencil, FileDown, FileUp, Settings, LoaderCircle } from 'lucide-svelte';
 
     // *** Import Aether specific variables and functions
     import { ae_util } from '$lib/ae_utils/ae_utils';
@@ -163,13 +163,18 @@
         <h2 class="journal__name h3 text-center">
             <BookOpenText class="inline-block text-neutral-800/60" />
             {@html $lq__journal_obj?.name ?? 'Loading...'}
-            {#if $ae_loc.trusted_access && $ae_loc.edit_mode}
+
-                ({$lq__journal_entry_obj_li?.length ?? '0'}×)
+            {#if $ae_loc.edit_mode}
+                <span
+                    class="badge preset-tonal-success font-bold text-lg px-2 ml-2"
+                    title="Entries matching current filters"
+                >
+                    {$lq__journal_entry_obj_li?.length ?? '0'}<span class="text-xs opacity-50 ml-0.5">&times;</span>
+                </span>
             {/if}
+
             {#await $journals_prom.load__journal_entry_obj_li}
-                <span class="fas fa-spinner fa-spin"></span>
+                <LoaderCircle size="1em" class="inline-block animate-spin ml-1 text-primary-500" />
-            {:then}
-                <!-- done -->
             {/await}
         </h2>