From 237e9ccced743f7dda5015b54c6da4b4f65d7952 Mon Sep 17 00:00:00 2001
From: janvi01 <janvibajo1@gmail.com>
Date: Thu, 1 Feb 2024 11:23:50 +0530
Subject: [PATCH 1/2] fix: search table result loading

---
 src/components/Tables/TableGrid/TableGrid.tsx | 4 ++--
 src/pages/TablesPage.tsx                      | 7 +++++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/Tables/TableGrid/TableGrid.tsx b/src/components/Tables/TableGrid/TableGrid.tsx
index 20d3b774b..bb25d4f04 100644
--- a/src/components/Tables/TableGrid/TableGrid.tsx
+++ b/src/components/Tables/TableGrid/TableGrid.tsx
@@ -31,7 +31,7 @@ export default function TableGrid({
                 <SlideTransition
                   key={table.id}
                   appear
-                  timeout={(sectionIndex + 1) * 100 + tableIndex * 50}
+                  timeout={(sectionIndex + 1) * 50 + tableIndex * 25}
                 >
                   <Grid item xs={12} sm={6} md={4} lg={3}>
                     <TableCard
@@ -53,7 +53,7 @@ export default function TableGrid({
                 <SlideTransition
                   key={"grid-section-" + sectionName}
                   in
-                  timeout={(sectionIndex + 1) * 100}
+                  timeout={(sectionIndex + 1) * 50}
                 >
                   <SectionHeading sx={{ pl: 2, pr: 1.5 }}>
                     {sectionName}
diff --git a/src/pages/TablesPage.tsx b/src/pages/TablesPage.tsx
index 0e70b17ab..6ad6a6f55 100644
--- a/src/pages/TablesPage.tsx
+++ b/src/pages/TablesPage.tsx
@@ -1,5 +1,5 @@
 import { useAtom, useSetAtom } from "jotai";
-import { find, groupBy, sortBy } from "lodash-es";
+import { find, groupBy, sortBy, debounce } from "lodash-es";
 import { Link } from "react-router-dom";
 
 import {
@@ -64,6 +64,9 @@ export default function TablesPage() {
     SEARCH_KEYS
   );
 
+  // Debounce the handleQuery function with a delay of 300 milliseconds
+  const debouncedHandleQuery = debounce((value) => handleQuery(value), 300);
+
   const favorites = Array.isArray(userSettings.favoriteTables)
     ? userSettings.favoriteTables
     : [];
@@ -183,7 +186,7 @@ export default function TablesPage() {
     <Container component="main" sx={{ px: 1, pt: 1, pb: 7 + 3 + 3 }}>
       <FloatingSearch
         label="Search tables"
-        onChange={(e) => handleQuery(e.target.value)}
+        onChange={(e) => debouncedHandleQuery(e.target.value)}
         paperSx={{
           maxWidth: (theme) => ({
             md: theme.breakpoints.values.sm - 48 * 4,

From f44412d4d4deb4718a2f3e7103de4d156ada4cc8 Mon Sep 17 00:00:00 2001
From: janvi01 <janvibajo1@gmail.com>
Date: Thu, 1 Feb 2024 11:31:05 +0530
Subject: [PATCH 2/2] fix: TableList view animation

---
 src/components/Tables/TableList/TableList.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Tables/TableList/TableList.tsx b/src/components/Tables/TableList/TableList.tsx
index 629111370..61ef82c00 100644
--- a/src/components/Tables/TableList/TableList.tsx
+++ b/src/components/Tables/TableList/TableList.tsx
@@ -47,14 +47,14 @@ export default function TableList({
                 <SlideTransition
                   key={"list-section-" + sectionName}
                   in
-                  timeout={(sectionIndex + 1) * 100}
+                  timeout={(sectionIndex + 1) * 50}
                 >
                   <SectionHeading sx={{ pl: 2, pr: 1 }}>
                     {sectionName}
                   </SectionHeading>
                 </SlideTransition>
 
-                <SlideTransition in timeout={(sectionIndex + 1) * 100}>
+                <SlideTransition in timeout={(sectionIndex + 1) * 50}>
                   <Paper>
                     <List disablePadding>
                       <TransitionGroup>{tableItems}</TransitionGroup>