Lazy load container logos, for better performance

src/lib/lazy-load.ts

@@ -0,0 +1,34 @@
+// See how the options work here: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
+let options = {
+  root: null,
+  rootMargin: "0px",
+  threshold: 0
+}
+
+export const lazyLoad = (image: any, src: string) => {
+  const loaded = () => {
+    image.classList.remove("loading");
+    image.style.opacity = "1";
+  };
+  const observer = new IntersectionObserver(
+    (entries) => {
+      if (entries[0].isIntersecting) {
+        image.src = src;
+        if (image.complete) {
+          loaded();
+        } else {
+          image.addEventListener("load", loaded);
+        }
+      }
+    },
+    options
+  );
+  observer.observe(image);
+
+  return {
+    destroy() {
+      observer.disconnect();
+      image.removeEventListener("load", loaded);
+    },
+  };
+};

src/routes/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+
   import Hero from '$lib/Hero.svelte';
   import ListFilter from '$lib/ListFilter.svelte';
   import Categories from '$lib/Categories.svelte';
@@ -12,6 +13,8 @@
 
   let searchTerm = '';
 
+  let showCategories = false;
+
   let selectedCategories: string[] = [];
   
   $: filteredTemplates = data.templates.filter((template: Template) => {
@@ -32,6 +35,10 @@
     );
   });
 
+  const showHideCategoryList = () => {
+    showCategories = !showCategories;
+  };
+
   const toggleCategory = (category: string) => {
     if (selectedCategories.includes(category)) {
       selectedCategories = selectedCategories.filter((cat) => cat !== category);
@@ -44,20 +51,27 @@
     searchTerm = '';
     selectedCategories = [];
   }
+
 </script>
 
 <!-- Main title, and CTA buttons -->
 <Hero />
 
 <!-- Search bar, and Templates sub-title -->
-<ListFilter bind:searchTerm={searchTerm} />
+<ListFilter
+  bind:searchTerm={searchTerm}
+  toggleCategories={showHideCategoryList}
+  isCategoriesVisible={showCategories}
+/>
 
 <!-- List of categories to filter by -->
-<Categories
+{#if showCategories}
-  categories={data.categories}
+  <Categories
-  selectedCategories={selectedCategories}
+    categories={data.categories}
-  toggleCategory={toggleCategory}
+    selectedCategories={selectedCategories}
-/>
+    toggleCategory={toggleCategory}
+  />
+{/if}
 
 <!-- Text showing num results, and users search term + filters  -->
 <SearchSummary