From c039016962223968c4b39f514f69a90d42672dea Mon Sep 17 00:00:00 2001
From: auraticabhi <abhijeetgupta989@gmail.com>
Date: Tue, 4 Feb 2025 15:18:52 +0530
Subject: [PATCH 1/3] Enhance search modal with smooth opening and closing
 transition

---
 components/AlgoliaSearch.tsx | 63 +++++++++++++++++++++++-------------
 1 file changed, 40 insertions(+), 23 deletions(-)

diff --git a/components/AlgoliaSearch.tsx b/components/AlgoliaSearch.tsx
index 06d37889c473..4032bbace11f 100644
--- a/components/AlgoliaSearch.tsx
+++ b/components/AlgoliaSearch.tsx
@@ -112,31 +112,48 @@ function Hit({ hit, children }: IHitProps) {
  */
 function AlgoliaModal({ onClose, initialQuery, indexName }: AlgoliaModalProps) {
   const router = useRouter();
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    setTimeout(() => setIsVisible(true), 10); // Small delay for smooth entry
+  }, []);
+
+  const handleClose = () => {
+    setIsVisible(false);
+    setTimeout(onClose, 300); // Delay closing to allow animation to finish
+  };
 
   return createPortal(
-    <DocSearchModal
-      initialQuery={initialQuery}
-      initialScrollY={window.scrollY}
-      searchParameters={{
-        distinct: 1
-      }}
-      placeholder={indexName === DOCS_INDEX_NAME ? 'Search documentation' : 'Search resources'}
-      onClose={onClose}
-      indexName={indexName}
-      apiKey={API_KEY}
-      appId={APP_ID}
-      navigator={{
-        navigate({ itemUrl }) {
-          onClose();
-          router.push(itemUrl);
-        }
-      }}
-      hitComponent={Hit}
-      transformItems={transformItems}
-      getMissingResultsUrl={({ query }) => {
-        return `https://github.com/asyncapi/website/issues/new?title=Cannot%20search%20given%20query:%20${query}`;
-      }}
-    />,
+    <div
+      className={`fixed inset-0 z-50 bg-black/50 transition-all duration-200 ${
+        isVisible ? 'scale-100 opacity-100' : 'scale-95 opacity-0'
+      }`}
+      onClick={handleClose}
+    >
+      <div
+        className='rounded-lg bg-transparent p-6 shadow-lg transition-all duration-300'
+        onClick={(e) => e.stopPropagation()}
+      >
+        <DocSearchModal
+          initialQuery={initialQuery}
+          initialScrollY={window.scrollY}
+          searchParameters={{ distinct: 1 }}
+          placeholder={indexName === DOCS_INDEX_NAME ? 'Search documentation' : 'Search resources'}
+          onClose={handleClose}
+          indexName={indexName}
+          apiKey={API_KEY}
+          appId={APP_ID}
+          navigator={{
+            navigate({ itemUrl }) {
+              handleClose();
+              router.push(itemUrl);
+            }
+          }}
+          hitComponent={Hit}
+          transformItems={transformItems}
+        />
+      </div>
+    </div>,
     document.body
   );
 }

From a2d6d784f042953a729ed8c1d2c4fecaa4137aa6 Mon Sep 17 00:00:00 2001
From: auraticabhi <abhijeetgupta989@gmail.com>
Date: Tue, 4 Feb 2025 15:41:23 +0530
Subject: [PATCH 2/3] fix: add cleanup functions to prevent memory leaks in
 modal transitions

---
 components/AlgoliaSearch.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/components/AlgoliaSearch.tsx b/components/AlgoliaSearch.tsx
index 4032bbace11f..d86d3d1b86eb 100644
--- a/components/AlgoliaSearch.tsx
+++ b/components/AlgoliaSearch.tsx
@@ -115,12 +115,14 @@ function AlgoliaModal({ onClose, initialQuery, indexName }: AlgoliaModalProps) {
   const [isVisible, setIsVisible] = useState(false);
 
   useEffect(() => {
-    setTimeout(() => setIsVisible(true), 10); // Small delay for smooth entry
+    const timer = setTimeout(() => setIsVisible(true), 10); // Small delay for smooth entry
+    return () => clearTimeout(timer);  // Cleanup function
   }, []);
-
+  
   const handleClose = () => {
     setIsVisible(false);
-    setTimeout(onClose, 300); // Delay closing to allow animation to finish
+    const timer = setTimeout(onClose, 300); // Delay closing to allow animation to finish
+    return () => clearTimeout(timer);  // Cleanup function
   };
 
   return createPortal(

From 553a4be93e74075537e3621064ae0f35ecc83f5a Mon Sep 17 00:00:00 2001
From: Abhijeet Gupta <abhijeetgupta989@gmail.com>
Date: Tue, 4 Feb 2025 15:55:10 +0530
Subject: [PATCH 3/3] Update components/AlgoliaSearch.tsx

Fixed formatting issues.

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 components/AlgoliaSearch.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/components/AlgoliaSearch.tsx b/components/AlgoliaSearch.tsx
index d86d3d1b86eb..d90c46d4a4b6 100644
--- a/components/AlgoliaSearch.tsx
+++ b/components/AlgoliaSearch.tsx
@@ -116,13 +116,15 @@ function AlgoliaModal({ onClose, initialQuery, indexName }: AlgoliaModalProps) {
 
   useEffect(() => {
     const timer = setTimeout(() => setIsVisible(true), 10); // Small delay for smooth entry
-    return () => clearTimeout(timer);  // Cleanup function
+
+    return () => clearTimeout(timer); // Cleanup function
   }, []);
-  
+
   const handleClose = () => {
     setIsVisible(false);
     const timer = setTimeout(onClose, 300); // Delay closing to allow animation to finish
-    return () => clearTimeout(timer);  // Cleanup function
+
+    return () => clearTimeout(timer); // Cleanup function
   };
 
   return createPortal(