From 812e4ac0afc56ee3121a5673af35bf8be2f4432c Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Fri, 24 Nov 2023 14:43:48 +0700
Subject: Update

---
 src/modules/result/components/Table.tsx | 32 ++++++++++++++++++++++++--------
 1 file changed, 24 insertions(+), 8 deletions(-)

(limited to 'src/modules/result/components')

diff --git a/src/modules/result/components/Table.tsx b/src/modules/result/components/Table.tsx
index a184ad7..a6a9f30 100644
--- a/src/modules/result/components/Table.tsx
+++ b/src/modules/result/components/Table.tsx
@@ -2,7 +2,7 @@
 import { useResultStore } from "@/common/stores/useResultStore";
 import { StockOpnameRes } from "@/common/types/stockOpname";
 import { Button, Pagination, Skeleton, Spacer, Spinner } from "@nextui-org/react"
-import { useQuery } from "@tanstack/react-query";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import styles from "./table.module.css"
 import clsxm from "@/common/libs/clsxm";
 import DetailRow from "./DetailRow";
@@ -39,6 +39,7 @@ const Table = () => {
       return await fetch(`/api/stock-opname?${searchParams}`)
         .then(res => res.json())
     },
+    placeholderData: keepPreviousData
   })
 
   const { filter } = useResultStore()
@@ -62,6 +63,21 @@ const Table = () => {
     setExportLoad(false)
   }
 
+  let debounceTimeout: NodeJS.Timeout | null = null;
+
+  const paginationOnChange = (page: number) => {
+    updateFilter('page', page)
+
+    if (debounceTimeout) clearTimeout(debounceTimeout)
+
+    debounceTimeout = setTimeout(() => {
+      window.scrollTo({ top: 0, 'behavior': 'smooth' });
+      debounceTimeout = null
+    }, 1000);
+  }
+
+  const isLoading = stockOpnames.isLoading || stockOpnames.isRefetching
+
   return (
     <>
       <div className="flex">
@@ -83,7 +99,7 @@ const Table = () => {
             <th className={styles.th}>GUDANG SELISIH</th>
           </thead>
           <tbody className={styles.tbody}>
-            {stockOpnames.data?.result.map((stockOpname: StockOpnameRes['result']) => (
+            {!isLoading && stockOpnames.data?.result.map((stockOpname: StockOpnameRes['result']) => (
               <>
                 <tr key={stockOpname.id} className={clsxm("border-t border-neutral-200", {
                   "text-danger-600": stockOpname.isDifferent,
@@ -127,18 +143,18 @@ const Table = () => {
               </>
             ))}
 
-            {stockOpnames.data?.result.length === 0 && (
+            {!isLoading && stockOpnames.data?.result.length === 0 && (
               <tr>
                 <td colSpan={8} className="text-center text-neutral-600 py-4">Belum ada data untuk ditampilkan</td>
               </tr>
             )}
 
-            {stockOpnames.isLoading && (
+            {isLoading && (
               <tr>
                 <td colSpan={8}>
-                  <div className="flex flex-col gap-y-2">
-                    {Array.from({ length: 6 }, (_, i) => (
-                      <Skeleton className="h-8" key={i} />
+                  <div className="flex flex-col gap-y-2.5">
+                    {Array.from({ length: 10 }, (_, i) => (
+                      <Skeleton className="h-16" key={i} />
                     ))}
                   </div>
                 </td>
@@ -152,7 +168,7 @@ const Table = () => {
           isCompact
           page={stockOpnames.data?.page || 1}
           total={stockOpnames.data?.totalPage || 1}
-          onChange={(page) => updateFilter('page', page)}
+          onChange={paginationOnChange}
         />
       </div>
     </>
-- 
cgit v1.2.3