From 025c8f46422d76611cb09c319d325df69e7d8262 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <alicia@omg.lol>
Date: Sat, 22 Apr 2023 21:07:02 +0100
Subject: [PATCH] Lazy load container logos, for better performance

---
 src/lib/lazy-load.ts    | 34 ++++++++++++++++++++++++++++++++++
 src/routes/+page.svelte | 26 ++++++++++++++++++++------
 2 files changed, 54 insertions(+), 6 deletions(-)
 create mode 100644 src/lib/lazy-load.ts

diff --git a/src/lib/lazy-load.ts b/src/lib/lazy-load.ts
new file mode 100644
index 0000000..2e5df19
--- /dev/null
+++ b/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);
+    },
+  };
+};
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index d5e1301..61eff25 100644
--- a/src/routes/+page.svelte
+++ b/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
-  categories={data.categories}
-  selectedCategories={selectedCategories}
-  toggleCategory={toggleCategory}
-/>
+{#if showCategories}
+  <Categories
+    categories={data.categories}
+    selectedCategories={selectedCategories}
+    toggleCategory={toggleCategory}
+  />
+{/if}
 
 <!-- Text showing num results, and users search term + filters  -->
 <SearchSummary