fix replacing the loader by using a DataGridLoader

src/pages/members/kyc/Kyc.tsx

@@ -1,6 +1,7 @@
 import {
   Container,
   DataGridInner,
+  DataGridLoader,
   DataGridProvider,
   TDataGridProps,
   useDataGrid
@@ -36,11 +37,8 @@ const Kyc = () => {
   };
   const { getUser } = useAuthContext();
 
-  useEffect(() => {
-    fetchCustomers();
-  }, [member]);
-
   async function fetchCustomers() {
+    setIsReloading(true);
     try {
       let customers = await axios.get(`${BASE_URL}/customer/list`, {
         params: {
@@ -73,7 +71,7 @@ const Kyc = () => {
       toast.error(error.message);
       console.log(error);
     } finally {
-      setLoading(false);
+      // setLoading(false);
       setIsReloading(false);
     }
   }
@@ -101,7 +99,7 @@ const Kyc = () => {
   };
 
   const handleYes = async () => {
-    setLoading(true);
+    // setLoading(true);
     const userLogin: any = await getUser();
     const updateData: any = member;
     const customerId = member.id;
@@ -179,7 +177,7 @@ const Kyc = () => {
       setDialogOpen(false);
       setIsDialogOpen(false);
       await fetchCustomers();
-      setLoading(false);
+      // setLoading(false);
       setIsReloading(false);
     }
   };
@@ -188,7 +186,11 @@ const Kyc = () => {
     setIsDialogOpen(el);
   }
 
-  if (loading) return <LoaderTransparant />;
+  useEffect(() => {
+    fetchCustomers();
+  }, [member]);
+
+  // if (isReloading) return <DataGridLoader />;
 
   return (
     <>
@@ -237,12 +239,13 @@ const Kyc = () => {
         {/* <div className="w-full overflow-x-auto"> */}
         <div className="grid gap-5 lg:gap-7.5 mt-5 relative">
           {isReloading && (
-            <div className="absolute inset-0 bg-white/70 z-10 flex items-center justify-center">
-              <div className="flex flex-col items-center">
-                <RefreshCw className="animate-spin h-8 w-8 text-slate-500 mb-2" />
-                <span className="text-slate-500 font-medium">Refreshing data...</span>
-              </div>
-            </div>
+            <DataGridLoader />
+            // <div className="absolute inset-0 bg-white/70 z-10 flex items-center justify-center">
+            //   <div className="flex flex-col items-center">
+            //     <RefreshCw className="animate-spin h-8 w-8 text-slate-500 mb-2" />
+            //     <span className="text-slate-500 font-medium">Refreshing data...</span>
+            //   </div>
+            // </div>
           )}
           <DataGridProvider
             data={members}