fix error and empty state heights

drips-network · Jan 10, 2025 · ebd00b0 · ebd00b0
1 parent 9a80a74
commit ebd00b0
Showing 1 changed file with 17 additions and 7 deletions.
diff --git a/src/lib/components/search-bar/components/results.svelte b/src/lib/components/search-bar/components/results.svelte
@@ -17,7 +17,9 @@
   <div class="results">
     {#if loading}
       <div class="loading-state" transition:fade={{ duration: 100 }}><Spinner /></div>
-    {:else if error}
+    {/if}
+
+    {#if error}
       <div class="empty-state">
         <Cross />
         <p class="typo-text">Sorry, something went wrong while searching.</p>
@@ -27,12 +29,13 @@
         <EyeClosed />
         <p class="typo-text">No results</p>
       </div>
+    {:else}
+      {#each results as result, index}
+        <div class="result" bind:this={resultElems[index]}>
+          <ResultComponent on:click item={result} />
+        </div>
+      {/each}
     {/if}
-    {#each results as result, index}
-      <div class="result" bind:this={resultElems[index]}>
-        <ResultComponent on:click item={result} />
-      </div>
-    {/each}
   </div>
 </TransitionedHeight>
 
@@ -52,7 +55,6 @@
     width: 100%;
   }
 
-  .empty-state,
   .loading-state {
     position: absolute;
     background: var(--color-background);
@@ -66,4 +68,12 @@
     flex-direction: column;
     z-index: 10;
   }
+
+  .empty-state {
+    height: 4rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
 </style>