Move loading state out of ResultsList

MuckRock · Feb 29, 2024 · 30efc9f · 30efc9f
1 parent 296341e
commit 30efc9f
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 27 deletions.
diff --git a/src/lib/components/documents/ResultsList.svelte b/src/lib/components/documents/ResultsList.svelte
@@ -10,7 +10,7 @@
   import DocumentListItem from "./DocumentListItem.svelte";
   import Flex from "../common/Flex.svelte";
   import Checkbox from "../common/Checkbox.svelte";
-  import { Hourglass24, Search24 } from "svelte-octicons";
+  import { Search24 } from "svelte-octicons";
   import Empty from "../common/Empty.svelte";
 
   export let results: DocumentResults = undefined;
@@ -26,24 +26,20 @@
 </script>
 
 <div class="container">
-  {#if !results}
-    <Empty icon={Hourglass24}>Loading…</Empty>
+  {#each results.results as document (document.id)}
+    <Flex gap={0.625} align="center">
+      <Checkbox
+        checked={$selected.includes(document.id)}
+        on:change={(event) => updateSelection(event, document.id)}
+      />
+      <DocumentListItem {document} />
+    </Flex>
   {:else}
-    {#each results.results as document (document.id)}
-      <Flex gap={0.625} align="center">
-        <Checkbox
-          checked={$selected.includes(document.id)}
-          on:change={(event) => updateSelection(event, document.id)}
-        />
-        <DocumentListItem {document} />
-      </Flex>
-    {:else}
-      <Empty icon={Search24}>
-        <h2>{$_("noDocuments.noSearchResults")}</h2>
-        <p>{$_("noDocuments.queryNoResults")}</p>
-      </Empty>
-    {/each}
-  {/if}
+    <Empty icon={Search24}>
+      <h2>{$_("noDocuments.noSearchResults")}</h2>
+      <p>{$_("noDocuments.queryNoResults")}</p>
+    </Empty>
+  {/each}
 </div>
 
 <style>

diff --git a/src/lib/components/documents/stories/ResultsList.stories.svelte b/src/lib/components/documents/stories/ResultsList.stories.svelte
@@ -30,7 +30,3 @@
 <Story name="Empty">
   <div style="width: 36rem"><ResultsList results={empty} /></div>
 </Story>
-
-<Story name="Loading">
-  <div style="width: 36rem"><ResultsList /></div>
-</Story>
diff --git a/src/routes/app/+page.svelte b/src/routes/app/+page.svelte
@@ -11,6 +11,7 @@
     PlusCircle16,
     Share16,
     Book16,
+    Hourglass24,
   } from "svelte-octicons";
   import MainLayout from "$lib/components/MainLayout.svelte";
   import Button from "$lib/components/common/Button.svelte";
@@ -19,10 +20,11 @@
   import SidebarGroup from "$lib/components/sidebar/SidebarGroup.svelte";
   import Action from "$lib/components/common/Action.svelte";
   import Pin from "@/common/Pin.svelte";
-  import ResultsList from "@/lib/components/documents/ResultsList.svelte";
-  import ContentLayout from "@/lib/components/ContentLayout.svelte";
-  import PageToolbar from "@/lib/components/common/PageToolbar.svelte";
-  import Search from "@/lib/components/Search.svelte";
+  import ResultsList from "$lib/components/documents/ResultsList.svelte";
+  import ContentLayout from "$lib/components/ContentLayout.svelte";
+  import PageToolbar from "$lib/components/common/PageToolbar.svelte";
+  import Search from "$lib/components/Search.svelte";
+  import Empty from "$lib/components/common/Empty.svelte";
 
   export let data;
 
@@ -76,7 +78,7 @@
       <Search {query} slot="center" />
     </PageToolbar>
     {#await searchResults}
-      <ResultsList />
+      <Empty icon={Hourglass24}>Loading…</Empty>
     {:then results}
       <ResultsList {results} />
     {/await}