From 4b6ca12901bc212aa1666a432a9f9aa39fca0464 Mon Sep 17 00:00:00 2001
From: Jared Pereira <jared@awarm.space>
Date: Wed, 10 Dec 2025 12:54:22 +0400
Subject: [PATCH] fix fetching tags and simplify result rendering

---
 components/Tags.tsx | 37 ++++++++++++++++---------------------
 1 file changed, 16 insertions(+), 21 deletions(-)

diff --git a/components/Tags.tsx b/components/Tags.tsx
index 1f20bc2e..10b33ed3 100644
--- a/components/Tags.tsx
+++ b/components/Tags.tsx
@@ -1,7 +1,8 @@
 "use client";
 import { CloseTiny } from "components/Icons/CloseTiny";
 import { Input } from "components/Input";
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef } from "react";
+import { useDebouncedEffect } from "src/hooks/useDebouncedEffect";
 import { Popover } from "components/Popover";
 import Link from "next/link";
 import { searchTags, type TagSearchResult } from "actions/searchTags";
@@ -81,21 +82,18 @@ export const TagSearchInput = (props: {
   let inputWidth = placeholderInputRef.current?.clientWidth;
 
   // Fetch tags whenever the input value changes
-  useEffect(() => {
-    let cancelled = false;
-    setIsSearching(true);
-
-    searchTags(tagInputValue).then((results) => {
-      if (!cancelled && results) {
+  useDebouncedEffect(
+    async () => {
+      setIsSearching(true);
+      const results = await searchTags(tagInputValue);
+      if (results) {
         setSearchResults(results);
-        setIsSearching(false);
       }
-    });
-
-    return () => {
-      cancelled = true;
-    };
-  }, [tagInputValue]);
+      setIsSearching(false);
+    },
+    300,
+    [tagInputValue],
+  );
 
   const filteredTags = searchResults.filter(
     (tag) => !props.selectedTags.includes(tag.name),
@@ -140,13 +138,10 @@ export const TagSearchInput = (props: {
     }
   };
 
-  const [userInputResult, setUserInputResult] = useState(false);
-  useEffect(() => {
-    const isTopResultShowing =
-      tagInputValue !== "" &&
-      !filteredTags.some((tag) => tag.name === tagInputValue);
-    setUserInputResult(isTopResultShowing);
-  }, [tagInputValue, filteredTags]);
+  const userInputResult =
+    tagInputValue !== "" &&
+    !filteredTags.some((tag) => tag.name === tagInputValue);
+
   return (
     <div className="relative">
       <Input
-- 
2.51.2