refactor: ♻️ first pass

Author: spences10

src/lib/components/general-observer.svelte

@@ -1,30 +1,45 @@
+<!-- 
+  https://www.reddit.com/r/sveltejs/comments/le28vg/whats_your_svelte_way_to_detect_if_an_element_is/
+  https://svelte.dev/repl/4b8ccdf1d01545baa0ab6a858bc05abb?version=3.32.1
+-->
 <script lang="ts">
-	import viewport from '$lib/utils/use-viewport-action'
-	import { createEventDispatcher } from 'svelte'
+  import { onDestroy, onMount } from 'svelte'
+  import { fade } from 'svelte/transition'
 
-	const dispatch = createEventDispatcher();
+  let loaded = false
+  let root: HTMLElement
 
-  export let height: string = '100'
-  export let width: string = '100'
+  // check if IntersectionObserver is available
+  const hasIntersectionObserver =
+    typeof IntersectionObserver !== 'undefined'
+  let observer = hasIntersectionObserver
+    ? new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            loaded = true
+            observer.disconnect()
+          }
+        })
+      })
+    : null
 
-  let intersecting: boolean
+  onMount(() => {
+    if (observer) {
+      observer.observe(root)
+    }
+  })
+
+  onDestroy(() => {
+    if (observer) {
+      observer.disconnect()
+    }
+  })
 </script>
 
-<div
-  use:viewport
-  on:enterViewport={() => {
-    intersecting = true
-    dispatch("enterViewport")
-  }}
->
-  {#if intersecting}
-    <div class="flex justify-center mb-12" style={`width: ${width}`}>
+<div bind:this={root}>
+  {#if loaded}
+    <div transition:fade>
       <slot />
     </div>
-  {:else}
-    <div
-      class="flex justify-center mb-12"
-      style={`height:${height}px;width: 100%`}
-    />
   {/if}
 </div>