fix: search spam

feat: show "oops!" when no data is available for search or feed
fix: error handling for sections and search

common/components/cards/ErrorCard.svelte

@@ -0,0 +1,32 @@
+<script>
+  export let promise
+</script>
+
+{#await promise then data}
+  {#if !data}
+    <div class='p-20 d-flex align-items-center justify-content-center w-full' style='height:35rem;'>
+      <div>
+        <h1 class='mb-5 text-white font-weight-bold text-center'>
+          Ooops!
+        </h1>
+        <div class='font-size-20 text-center text-muted'>
+          Looks like there's nothing here.
+        </div>
+      </div>
+    </div>
+  {/if}
+{:catch error}
+  <div class='p-20 d-flex align-items-center justify-content-center w-full' style='height:35rem;'>
+    <div>
+      <h1 class='mb-5 text-white font-weight-bold text-center'>
+        Ooops!
+      </h1>
+      <div class='font-size-20 text-center text-muted'>
+        Looks like something went wrong!.
+      </div>
+      <div class='font-size-20 text-center text-muted'>
+        {error.message}
+      </div>
+    </div>
+  </div>
+{/await}

common/modules/util.js

@@ -119,7 +119,8 @@ export function debounce (fn, time) {
       fn(...args)
     }
     clearTimeout(timeout)
-    timeout = setTimeout(later, time).unref?.()
+    timeout = setTimeout(later, time)
+    timeout.unref?.()
   }
 }
 

common/views/Home/Section.svelte

@@ -4,6 +4,7 @@
 
 <script>
   import Card from '@/components/cards/Card.svelte'
+  import ErrorCard from '@/components/cards/ErrorCard.svelte'
   import { search } from '../Search.svelte'
   import { page } from '@/App.svelte'
   import { click } from '@/modules/click.js'
@@ -42,6 +43,9 @@
   {#each $preview || fakecards as card}
     <Card {card} />
   {/each}
+  {#if $preview?.length}
+    <ErrorCard promise={$preview[0].data} />
+  {/if}
 </div>
 
 <style>

common/views/Search.svelte

@@ -15,6 +15,7 @@
   import smoothScroll from '@/modules/scroll.js'
   import { debounce } from '@/modules/util.js'
   import { onDestroy, onMount } from 'svelte'
+  import ErrorCard from '@/components/cards/ErrorCard.svelte'
 
   let page = 0
   items.value = []
@@ -65,11 +66,14 @@
 
 <div class='bg-dark h-full w-full overflow-y-scroll d-flex flex-wrap flex-row root overflow-x-hidden justify-content-center align-content-start' use:smoothScroll bind:this={container} on:scroll={infiniteScroll}>
   <Search bind:search={$search} on:input={update} />
-  <div class='h-full w-full d-flex flex-wrap flex-row px-50 justify-content-center align-content-start'>
+  <div class='w-full d-flex flex-wrap flex-row px-50 justify-content-center align-content-start'>
     {#key $key}
       {#each $items as card}
         <Card {card} />
       {/each}
+      {#if $items?.length}
+        <ErrorCard promise={$items[0].data} />
+      {/if}
     {/key}
   </div>
 </div>