Fixed loading indicators

Author: niemyjski

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/table/EventsDataTable.svelte

@@ -7,14 +7,14 @@
     import type { EventSummaryModel, SummaryTemplateKeys } from '../summary/index';
 
     interface Props {
+        isLoading: boolean;
         limit: number;
-        loading: boolean;
         rowclick?: (row: EventSummaryModel<SummaryTemplateKeys>) => void;
         table: Table<EventSummaryModel<SummaryTemplateKeys>>;
         toolbarChildren?: Snippet;
     }
 
-    let { limit = $bindable(), loading, rowclick, table, toolbarChildren }: Props = $props();
+    let { isLoading, limit = $bindable(), rowclick, table, toolbarChildren }: Props = $props();
 </script>
 
 <DataTable.Root>
@@ -23,7 +23,7 @@
             {@render toolbarChildren()}
         {/if}
     </DataTable.Toolbar>
-    <DataTable.Body {rowclick} {table} {loading}></DataTable.Body>
+    <DataTable.Body {rowclick} {table} {isLoading}></DataTable.Body>
     <DataTable.Pagination {table}>
         <DataTable.PageSize bind:value={limit} {table}></DataTable.PageSize>
     </DataTable.Pagination>

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-body.svelte

@@ -10,12 +10,12 @@
     import DataTableColumnHeader from './data-table-column-header.svelte';
 
     interface Props {
-        loading: boolean;
+        isLoading: boolean;
         rowclick?: (row: TData) => void;
         table: SvelteTable<TData>;
     }
 
-    let { loading, rowclick, table }: Props = $props();
+    let { isLoading, rowclick, table }: Props = $props();
 
     function getHeaderColumnClass(header: Header<TData, unknown>) {
         const classes = [(header.column.columnDef.meta as { class?: string })?.class || ''];
@@ -40,7 +40,7 @@
         }
     }
 
-    const isLoading = $derived(loading && table.getRowModel().rows.length === 0);
+    const showLoading = $derived(isLoading && table.getRowModel().rows.length === 0);
 </script>
 
 <div class="rounded-md border">
@@ -62,7 +62,7 @@
             <Table.Row class="hidden text-center only:table-row">
                 <Table.Cell colspan={table.getVisibleLeafColumns().length}>No data was found with the current filter.</Table.Cell>
             </Table.Row>
-            {#if isLoading}
+            {#if showLoading}
                 <Table.Row class="text-center">
                     <Table.Cell colspan={table.getVisibleLeafColumns().length}>
                         <div class="flex items-center justify-center">

src/Exceptionless.Web/ClientApp/src/routes/(app)/+page.svelte

@@ -50,10 +50,13 @@
     const table = createTable(context.options);
 
     const client = useFetchClient();
+    let isLoading = $state(false);
+    client.loading.on((loading) => (isLoading = loading!));
+
     let response = $state<FetchClientResponse<EventSummaryModel<SummaryTemplateKeys>[]>>();
 
     async function loadData() {
-        if (client.loading) {
+        if (isLoading) {
             return;
         }
 
@@ -110,7 +113,7 @@
     <Card.Root>
         <Card.Title class="p-6 pb-0 text-2xl" level={2}>Events</Card.Title>
         <Card.Content>
-            <EventsDataTable bind:limit={limit.value} loading={!response} {rowclick} {table}>
+            <EventsDataTable bind:limit={limit.value} {isLoading} {rowclick} {table}>
                 {#snippet toolbarChildren()}
                     <FacetedFilter.Root changed={onFilterChanged} {facets} remove={onFilterRemoved}></FacetedFilter.Root>
                 {/snippet}

src/Exceptionless.Web/ClientApp/src/routes/(app)/account/notifications/+page.svelte

@@ -12,10 +12,13 @@
     data.email_notifications_enabled = true;
 
     const client = useFetchClient();
+    let isLoading = $state(false);
+    client.loading.on((loading) => (isLoading = loading!));
+
     let problem = $state(new ProblemDetails());
 
     async function onSave() {
-        if (client.loading) {
+        if (isLoading) {
             return;
         }
     }
@@ -42,7 +45,7 @@
 
         <div class="pt-2">
             <Button type="submit">
-                {#if client.loading}
+                {#if isLoading}
                     <Loading class="mr-2" variant="secondary"></Loading> Saving...
                 {:else}
                     Save

src/Exceptionless.Web/ClientApp/src/routes/(app)/account/security/+page.svelte

@@ -26,10 +26,13 @@
     const data = $state(new User());
 
     const client = useFetchClient();
+    let isLoading = $state(false);
+    client.loading.on((loading) => (isLoading = loading!));
+
     let problem = $state(new ProblemDetails());
 
     async function onSave() {
-        if (client.loading) {
+        if (isLoading) {
             return;
         }
 
@@ -92,7 +95,7 @@
 
         <div class="pt-2">
             <Button type="submit">
-                {#if client.loading}
+                {#if isLoading}
                     <Loading class="mr-2" variant="secondary"></Loading> Updating password...
                 {:else}
                     Update password

src/Exceptionless.Web/ClientApp/src/routes/(app)/issues/+page.svelte

@@ -65,10 +65,13 @@
     const table = createTable(context.options);
 
     const client = useFetchClient();
+    let isLoading = $state(false);
+    client.loading.on((loading) => (isLoading = loading!));
+
     let response = $state<FetchClientResponse<EventSummaryModel<SummaryTemplateKeys>[]>>();
 
     async function loadData() {
-        if (client.loading) {
+        if (isLoading) {
             return;
         }
 
@@ -105,7 +108,7 @@
     <Card.Root>
         <Card.Title class="p-6 pb-0 text-2xl" level={2}>Issues</Card.Title>
         <Card.Content>
-            <EventsDataTable bind:limit={limit.value} loading={!response} {rowclick} {table}>
+            <EventsDataTable bind:limit={limit.value} {isLoading} {rowclick} {table}>
                 {#snippet toolbarChildren()}
                     <FacetedFilter.Root changed={onFilterChanged} {facets} remove={onFilterRemoved}></FacetedFilter.Root>
                 {/snippet}

src/Exceptionless.Web/ClientApp/src/routes/(app)/stream/+page.svelte

@@ -60,11 +60,14 @@
     const table = createTable(context.options);
 
     const client = useFetchClient();
+    let isLoading = $state(false);
+    client.loading.on((loading) => (isLoading = loading!));
+
     let response = $state<FetchClientResponse<EventSummaryModel<SummaryTemplateKeys>[]>>();
     let before: string | undefined;
 
     async function loadData(filterChanged: boolean = false) {
-        if (client.loading && filterChanged && !before) {
+        if (isLoading && filterChanged && !before) {
             return;
         }
 
@@ -136,7 +139,7 @@
             <DataTable.Toolbar {table}>
                 <FacetedFilter.Root changed={onFilterChanged} {facets} remove={onFilterRemoved}></FacetedFilter.Root>
             </DataTable.Toolbar>
-            <DataTable.Body {rowclick} {table} loading={!response}></DataTable.Body>
+            <DataTable.Body {rowclick} {table} {isLoading}></DataTable.Body>
             <Muted class="flex flex-1 items-center justify-between">
                 <DataTable.PageSize bind:value={limit.value} {table}></DataTable.PageSize>
                 <div class="py-2 text-center">

src/Exceptionless.Web/ClientApp/src/routes/(auth)/logout/+page.svelte

@@ -17,9 +17,12 @@
     });
 
     const client = useFetchClient();
+    let isLoading = $state(false);
+    client.loading.on((loading) => (isLoading = loading!));
+
     let message = $state<string>();
     async function onLogout() {
-        if (client.loading) {
+        if (isLoading) {
             return;
         }
 
@@ -43,7 +46,7 @@
             <ErrorMessage {message}></ErrorMessage>
 
             <Form.Button>
-                {#if client.loading}
+                {#if isLoading}
                     <Loading class="mr-2" variant="secondary"></Loading> Logging out...
                 {:else}
                     Logout