From 16c0dd7912d06eaa62bf997a2130b6d975b1c153 Mon Sep 17 00:00:00 2001
From: Victor Oluwayemi <oluwayemivictor15@gmail.com>
Date: Fri, 30 Aug 2024 15:56:25 +0100
Subject: [PATCH 1/7] feat: add loading component to recent searches island

---
 .../islands/recent-searches-loading.jsx       | 20 +++++++++++
 src/components/islands/recent-searches.jsx    | 36 +++++++++++--------
 2 files changed, 41 insertions(+), 15 deletions(-)
 create mode 100644 src/components/islands/recent-searches-loading.jsx

diff --git a/src/components/islands/recent-searches-loading.jsx b/src/components/islands/recent-searches-loading.jsx
new file mode 100644
index 0000000..37c4b4a
--- /dev/null
+++ b/src/components/islands/recent-searches-loading.jsx
@@ -0,0 +1,20 @@
+
+
+export default function RecentSearchesLoading ({ recentSearches })  {
+  return (
+    <div className="space-y-3 ml-2 mt-4 md:mt-6">
+      <h2 className="text-2xl md:text-4xl font-black">Recent</h2>
+      <ol className="space-y-1.5 underline">
+        {Object.values(recentSearches).slice(0, 5).map((item, i) => (
+          <li key={i}>
+            <div
+              className="placeholder-text bg-gray-300 rounded animate-pulse"
+              style={{ width: `${item.word.length * 8}px`, height: '24px' }}
+            ></div>
+          </li>
+        ))}
+      </ol>
+    </div>
+  );
+};
+
diff --git a/src/components/islands/recent-searches.jsx b/src/components/islands/recent-searches.jsx
index fcb4006..0312cfc 100644
--- a/src/components/islands/recent-searches.jsx
+++ b/src/components/islands/recent-searches.jsx
@@ -1,32 +1,38 @@
-import { useEffect } from "react";
-import { useStore } from "@nanostores/react";
+import { useEffect, useState } from 'react';
+import { useStore } from '@nanostores/react';
 import { $recentSearches } from "../../lib/stores/search.js";
+import RecentSearchesLoading from './recent-searches-loading';
 
-/**
- * Recent Searches Component - An Island that displays a user's last 5 searches
- * 
- * @todo implement a default list instead of `null` when no `$recentSearch` is found 
- * @todo implement loading component to avoid flickering UI
- */
 export default function RecentSearches() {
   const recentSearches = useStore($recentSearches);
+  const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
-    $recentSearches.set({...JSON.parse(localStorage.getItem("jargons.dev:recent_searches"))})
+    const savedSearches = JSON.parse(localStorage.getItem("jargons.dev:recent_searches"));
+    if (savedSearches) {
+      $recentSearches.set(savedSearches);
+    }
+    setTimeout(()=>{
+      setIsLoading(false);
+    },2000)
   }, []);
 
+  if (isLoading) {
+    return <RecentSearchesLoading recentSearches={recentSearches} />;
+  }
+
   return Object.values(recentSearches).length ? (
     <div className="space-y-3 ml-2 mt-4 md:mt-6">
-			<h2 className="text-2xl md:text-4xl font-black">Recent</h2>
-			<ol className="space-y-1.5 underline">
+      <h2 className="text-2xl md:text-4xl font-black">Recent</h2>
+      <ol className="space-y-1.5 underline">
         {Object.values(recentSearches).slice(0, 5).map((item, i) => (
           <li key={i}>
             <a href={item.url}>
-              { item.word }
+              {item.word}
             </a>
           </li>
         ))}
-			</ol>
-		</div>
+      </ol>
+    </div>
   ) : null;
-}
\ No newline at end of file
+}

From a17fa905623426f8d1d8841109b4545fe400c244 Mon Sep 17 00:00:00 2001
From: Victor Oluwayemi <oluwayemivictor15@gmail.com>
Date: Fri, 30 Aug 2024 16:20:27 +0100
Subject: [PATCH 2/7] chore: Add a cleanup function using clearTimeout

---
 src/components/islands/recent-searches.jsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/islands/recent-searches.jsx b/src/components/islands/recent-searches.jsx
index 0312cfc..5369964 100644
--- a/src/components/islands/recent-searches.jsx
+++ b/src/components/islands/recent-searches.jsx
@@ -12,9 +12,11 @@ export default function RecentSearches() {
     if (savedSearches) {
       $recentSearches.set(savedSearches);
     }
-    setTimeout(()=>{
+    const timer = setTimeout(() => {
       setIsLoading(false);
-    },2000)
+    }, 2000);
+
+    return () => clearTimeout(timer); 
   }, []);
 
   if (isLoading) {

From 8e4e3e25a9f50e171852d2e542ea8a80f7a30f15 Mon Sep 17 00:00:00 2001
From: Victor Oluwayemi <oluwayemivictor15@gmail.com>
Date: Fri, 30 Aug 2024 15:56:25 +0100
Subject: [PATCH 3/7] feat: add loading component to recent searches island

---
 .../islands/recent-searches-loading.jsx       | 20 +++++++++++
 src/components/islands/recent-searches.jsx    | 36 +++++++++++--------
 2 files changed, 41 insertions(+), 15 deletions(-)
 create mode 100644 src/components/islands/recent-searches-loading.jsx

diff --git a/src/components/islands/recent-searches-loading.jsx b/src/components/islands/recent-searches-loading.jsx
new file mode 100644
index 0000000..37c4b4a
--- /dev/null
+++ b/src/components/islands/recent-searches-loading.jsx
@@ -0,0 +1,20 @@
+
+
+export default function RecentSearchesLoading ({ recentSearches })  {
+  return (
+    <div className="space-y-3 ml-2 mt-4 md:mt-6">
+      <h2 className="text-2xl md:text-4xl font-black">Recent</h2>
+      <ol className="space-y-1.5 underline">
+        {Object.values(recentSearches).slice(0, 5).map((item, i) => (
+          <li key={i}>
+            <div
+              className="placeholder-text bg-gray-300 rounded animate-pulse"
+              style={{ width: `${item.word.length * 8}px`, height: '24px' }}
+            ></div>
+          </li>
+        ))}
+      </ol>
+    </div>
+  );
+};
+
diff --git a/src/components/islands/recent-searches.jsx b/src/components/islands/recent-searches.jsx
index fcb4006..0312cfc 100644
--- a/src/components/islands/recent-searches.jsx
+++ b/src/components/islands/recent-searches.jsx
@@ -1,32 +1,38 @@
-import { useEffect } from "react";
-import { useStore } from "@nanostores/react";
+import { useEffect, useState } from 'react';
+import { useStore } from '@nanostores/react';
 import { $recentSearches } from "../../lib/stores/search.js";
+import RecentSearchesLoading from './recent-searches-loading';
 
-/**
- * Recent Searches Component - An Island that displays a user's last 5 searches
- * 
- * @todo implement a default list instead of `null` when no `$recentSearch` is found 
- * @todo implement loading component to avoid flickering UI
- */
 export default function RecentSearches() {
   const recentSearches = useStore($recentSearches);
+  const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
-    $recentSearches.set({...JSON.parse(localStorage.getItem("jargons.dev:recent_searches"))})
+    const savedSearches = JSON.parse(localStorage.getItem("jargons.dev:recent_searches"));
+    if (savedSearches) {
+      $recentSearches.set(savedSearches);
+    }
+    setTimeout(()=>{
+      setIsLoading(false);
+    },2000)
   }, []);
 
+  if (isLoading) {
+    return <RecentSearchesLoading recentSearches={recentSearches} />;
+  }
+
   return Object.values(recentSearches).length ? (
     <div className="space-y-3 ml-2 mt-4 md:mt-6">
-			<h2 className="text-2xl md:text-4xl font-black">Recent</h2>
-			<ol className="space-y-1.5 underline">
+      <h2 className="text-2xl md:text-4xl font-black">Recent</h2>
+      <ol className="space-y-1.5 underline">
         {Object.values(recentSearches).slice(0, 5).map((item, i) => (
           <li key={i}>
             <a href={item.url}>
-              { item.word }
+              {item.word}
             </a>
           </li>
         ))}
-			</ol>
-		</div>
+      </ol>
+    </div>
   ) : null;
-}
\ No newline at end of file
+}

From 1c31f7a7c1753666a5e20f8a4a3372ab790a92cb Mon Sep 17 00:00:00 2001
From: Victor Oluwayemi <oluwayemivictor15@gmail.com>
Date: Fri, 30 Aug 2024 16:20:27 +0100
Subject: [PATCH 4/7] chore: Add a cleanup function using clearTimeout

---
 src/components/islands/recent-searches.jsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/islands/recent-searches.jsx b/src/components/islands/recent-searches.jsx
index 0312cfc..5369964 100644
--- a/src/components/islands/recent-searches.jsx
+++ b/src/components/islands/recent-searches.jsx
@@ -12,9 +12,11 @@ export default function RecentSearches() {
     if (savedSearches) {
       $recentSearches.set(savedSearches);
     }
-    setTimeout(()=>{
+    const timer = setTimeout(() => {
       setIsLoading(false);
-    },2000)
+    }, 2000);
+
+    return () => clearTimeout(timer); 
   }, []);
 
   if (isLoading) {

From d60531751575d4ef7735f18aa92be67d5847787c Mon Sep 17 00:00:00 2001
From: Victor Oluwayemi <oluwayemivictor15@gmail.com>
Date: Tue, 17 Sep 2024 17:30:56 +0100
Subject: [PATCH 5/7] rename component

---
 .../islands/recent-searches-loading.jsx       | 20 -------------------
 1 file changed, 20 deletions(-)
 delete mode 100644 src/components/islands/recent-searches-loading.jsx

diff --git a/src/components/islands/recent-searches-loading.jsx b/src/components/islands/recent-searches-loading.jsx
deleted file mode 100644
index 37c4b4a..0000000
--- a/src/components/islands/recent-searches-loading.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-
-
-export default function RecentSearchesLoading ({ recentSearches })  {
-  return (
-    <div className="space-y-3 ml-2 mt-4 md:mt-6">
-      <h2 className="text-2xl md:text-4xl font-black">Recent</h2>
-      <ol className="space-y-1.5 underline">
-        {Object.values(recentSearches).slice(0, 5).map((item, i) => (
-          <li key={i}>
-            <div
-              className="placeholder-text bg-gray-300 rounded animate-pulse"
-              style={{ width: `${item.word.length * 8}px`, height: '24px' }}
-            ></div>
-          </li>
-        ))}
-      </ol>
-    </div>
-  );
-};
-

From 405e8e4b43cdac18ef266d3925613d7ebfe6cbd0 Mon Sep 17 00:00:00 2001
From: Victor Oluwayemi <oluwayemivictor15@gmail.com>
Date: Tue, 17 Sep 2024 17:34:27 +0100
Subject: [PATCH 6/7] import recent searches file

---
 src/pages/index.astro | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index 89ec8ba..fb39f12 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -2,8 +2,7 @@
 import { getCollection } from "astro:content";
 import BaseLayout from "../layouts/base.astro";
 import Search from "../components/islands/search.jsx";
-import RecentSearches from "../components/islands/recent-searches.jsx";
-
+import RecentSearches from "../components/recent-searches.astro";
 const dictionary = await getCollection("dictionary");
 ---
 
@@ -33,6 +32,7 @@ const dictionary = await getCollection("dictionary");
     </div>
 
 		<!-- Recent Word Look Up -->
-		<RecentSearches client:load />
+		<!-- <RecentSearches client:load /> -->
+		 <RecentSearches />
 	</main>
 </BaseLayout>

From 1a0b50f92e8409e78804c689da69825e7d1075e2 Mon Sep 17 00:00:00 2001
From: Victor Oluwayemi <oluwayemivictor15@gmail.com>
Date: Tue, 17 Sep 2024 17:37:18 +0100
Subject: [PATCH 7/7] add loading component to recent search

---
 src/components/islands/loading-component.jsx | 26 ++++++++++
 src/components/islands/recent-searches.jsx   | 15 ++----
 src/components/recent-searches.astro         |  7 +++
 src/pages/index.astro                        | 52 ++++++++++----------
 4 files changed, 65 insertions(+), 35 deletions(-)
 create mode 100644 src/components/islands/loading-component.jsx
 create mode 100644 src/components/recent-searches.astro

diff --git a/src/components/islands/loading-component.jsx b/src/components/islands/loading-component.jsx
new file mode 100644
index 0000000..53620a0
--- /dev/null
+++ b/src/components/islands/loading-component.jsx
@@ -0,0 +1,26 @@
+
+
+export default function LoadingComponent() {
+
+
+  return (
+    <div className="space-y-3 ml-2 mt-4 md:mt-6 loading">
+      <h2 className="font-black bg-gray-300 rounded animate-pulse" style={{ height: "30px", width: "150px" }}>
+
+      </h2>
+
+      {/* List of recent searches or placeholders */}
+      <ol className="space-y-1.5 underline">
+        {[...Array(5)].map((_, i) => (
+          <li key={i}>
+            <div
+              className="placeholder-text bg-gray-300 rounded animate-pulse"
+              style={{ width: "100px", height: "24px" }}
+            ></div>
+          </li>
+        ))}
+
+      </ol>
+    </div>
+  );
+}
diff --git a/src/components/islands/recent-searches.jsx b/src/components/islands/recent-searches.jsx
index 5369964..7a98c0e 100644
--- a/src/components/islands/recent-searches.jsx
+++ b/src/components/islands/recent-searches.jsx
@@ -1,27 +1,22 @@
 import { useEffect, useState } from 'react';
 import { useStore } from '@nanostores/react';
 import { $recentSearches } from "../../lib/stores/search.js";
-import RecentSearchesLoading from './recent-searches-loading';
 
 export default function RecentSearches() {
   const recentSearches = useStore($recentSearches);
-  const [isLoading, setIsLoading] = useState(true);
-
+  
   useEffect(() => {
     const savedSearches = JSON.parse(localStorage.getItem("jargons.dev:recent_searches"));
     if (savedSearches) {
       $recentSearches.set(savedSearches);
     }
-    const timer = setTimeout(() => {
-      setIsLoading(false);
-    }, 2000);
+  
+    const loader = document.querySelector(".loading");
+    if (loader) loader.remove();
 
-    return () => clearTimeout(timer); 
   }, []);
 
-  if (isLoading) {
-    return <RecentSearchesLoading recentSearches={recentSearches} />;
-  }
+
 
   return Object.values(recentSearches).length ? (
     <div className="space-y-3 ml-2 mt-4 md:mt-6">
diff --git a/src/components/recent-searches.astro b/src/components/recent-searches.astro
new file mode 100644
index 0000000..482d473
--- /dev/null
+++ b/src/components/recent-searches.astro
@@ -0,0 +1,7 @@
+---
+import RecentSearch from "./islands/recent-searches";
+import LoadingComponent from "./islands/loading-component";
+---
+
+<LoadingComponent />
+<RecentSearch client:load />
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index fb39f12..e37f29d 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -6,33 +6,35 @@ import RecentSearches from "../components/recent-searches.astro";
 const dictionary = await getCollection("dictionary");
 ---
 
-<BaseLayout 
-	pageTitle="Jargons.dev"
-	subtitle="Simplified Meaning & Definition to Technical Terms"
+<BaseLayout
+  pageTitle="Jargons.dev"
+  subtitle="Simplified Meaning & Definition to Technical Terms"
 >
-	<main class="flex flex-col max-w-screen-lg p-5 justify-center mx-auto min-h-screen">
-		<!-- Title -->
-		<div class="mb-4 md:mb-6">
-			<h1 class="relative text-5xl md:text-7xl lg:text-8xl font-black w-fit">
-				<a href="/" class="absolute font-normal text-[0.6rem] md:text-xs right-0 md:top-1.5 lg:top-3">
-					jargons.dev
-				</a>
-				Dictionary
-			</h1>
-		</div>
-		
-		<!-- Search -->
-		<Search triggerSize="md" dictionary={dictionary} client:load />
+  <main
+    class="flex flex-col max-w-screen-lg p-5 justify-center mx-auto min-h-screen"
+  >
+    <!-- Title -->
+    <div class="mb-4 md:mb-6">
+      <h1 class="relative text-5xl md:text-7xl lg:text-8xl font-black w-fit">
+        <a
+          href="/"
+          class="absolute font-normal text-[0.6rem] md:text-xs right-0 md:top-1.5 lg:top-3"
+        >
+          jargons.dev
+        </a>
+        Dictionary
+      </h1>
+    </div>
+
+    <!-- Search -->
+    <Search triggerSize="md" dictionary={dictionary} client:load />
 
-		<!-- Browse words -->
-		<div class="ml-2 mt-4 md:mt-6" id="whirl-browse-words">
-      <a href="/browse">
-        Browse Words
-      </a>
+    <!-- Browse words -->
+    <div class="ml-2 mt-4 md:mt-6" id="whirl-browse-words">
+      <a href="/browse"> Browse Words </a>
     </div>
 
-		<!-- Recent Word Look Up -->
-		<!-- <RecentSearches client:load /> -->
-		 <RecentSearches />
-	</main>
+    <!-- Recent Word Look Up -->
+    <RecentSearches />
+  </main>
 </BaseLayout>