[ALS-7439] Add loading indicator to searches (#255)

hms-dbmi · Oct 16, 2024 · ef87741 · ef87741
1 parent 4c0925a
commit ef87741
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 5 deletions.
diff --git a/src/lib/components/datatable/RemoteTable.svelte b/src/lib/components/datatable/RemoteTable.svelte
@@ -12,9 +12,12 @@
   import RowsPerPage from '$lib/components/datatable/accessories/Rows.svelte';
   import RowCount from '$lib/components/datatable/accessories/Count.svelte';
   import Pagination from '$lib/components/datatable/accessories/Pagination.svelte';
+  import { ProgressRadial } from '@skeletonlabs/skeleton';
+  import type { Writable } from 'svelte/store';
 
   export let tableName: string = 'ExplorerTable';
   export let handler: DataHandler;
+  export let isLoading: Writable<boolean>;
   export let searchable = false;
   export let title = '';
   export let fullWidth: boolean = false;
@@ -87,7 +90,15 @@
       </tr>
     </thead>
     <tbody>
-      {#if $rows.length > 0}
+      {#if $isLoading}
+        <tr>
+          <td colspan={columns.length} class="text-center py-8">
+            <div class="flex justify-center items-center">
+              <ProgressRadial width="w-12" />
+            </div>
+          </td>
+        </tr>
+      {:else if $rows.length > 0}
         {#each $rows as row, i}
           <ExpandableRow {tableName} {cellOverides} {columns} index={i} {row} {rowClickHandler} />
         {/each}

diff --git a/src/lib/components/explorer/Explorer.svelte b/src/lib/components/explorer/Explorer.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onDestroy, onMount } from 'svelte';
   import { DataHandler, type State } from '@vincjo/datatables/remote';
-  import type { Unsubscriber } from 'svelte/store';
+  import { type Unsubscriber, writable } from 'svelte/store';
 
   import { page } from '$app/stores';
   import { goto } from '$app/navigation';
@@ -20,6 +20,8 @@
   /* eslint-disable @typescript-eslint/no-explicit-any */
   export let tourConfig: any;
 
+  const isLoading = writable(false);
+
   let { searchTerm, search, selectedFacets, error } = SearchStore;
   let searchInput = $page.url.searchParams.get('search') || $searchTerm || '';
   const tableName = 'ExplorerTable';
@@ -39,16 +41,23 @@
   };
 
   const handler = new DataHandler([] as SearchResult[], { rowsPerPage: 10 });
-  handler.onChange((state: State) => {
+  handler.onChange(async (state: State) => {
     doDisableTour();
-    return search($searchTerm, $selectedFacets, state);
+    isLoading.set(true);
+    try {
+      const results = await search($searchTerm, $selectedFacets, state);
+      return results;
+    } finally {
+      isLoading.set(false);
+    }
   });
 
   let unsubSelectedFacets: Unsubscriber;
   let unsubSearchTerm: Unsubscriber;
 
   onMount(() => {
     unsubSelectedFacets = selectedFacets.subscribe(() => {
+      handler.setPage(1);
       handler.invalidate();
     });
 
@@ -126,7 +135,7 @@
         <p>{$error}</p>
       </ErrorAlert>
     {:else if $searchTerm || $selectedFacets.length > 0}
-      <SearchDatatable {tableName} {handler} {columns} {cellOverides} />
+      <SearchDatatable {tableName} {handler} {columns} {cellOverides} {isLoading} />
     {/if}
     {#if features.explorer.enableTour && tourEnabled}
       <div id="explorer-tour" class="text-center mt-4">