adding dynamic filters

src/components/admin/UsersTable/ButtonOnClick.tsx

@@ -2,7 +2,7 @@
 
 import PlusCircleIcon from "@heroicons/react/24/outline/PlusCircleIcon";
 
-export default async function ButtonOnClick(props:any) {
+export default function ButtonOnClick(props:any) {
     const handleClick = async () => {
         alert("This feature is coming soon");
      

src/components/admin/UsersTable/index.tsx

@@ -1,9 +1,10 @@
 import { ChevronDownIcon } from "@heroicons/react/20/solid";
-import { PlusCircleIcon } from "@heroicons/react/20/solid";
+//import { PlusCircleIcon } from "@heroicons/react/20/solid";
 
-import Image from "next/image";
+//import Image from "next/image";
 import Link from "next/link";
 import ButtonOnClick from "./ButtonOnClick";
+import { Suspense } from "react";
 
 
 export default async function UsersTable(props: any) {
@@ -11,9 +12,8 @@ export default async function UsersTable(props: any) {
   const onClick = () => {
     alert("This feature is coming soon");
 }
-  return (
-    <div className="pb-12">
-
+await new Promise((resolve) => setTimeout(resolve,1000));  return (
+    <div className="pb-12"> 
       <div className="mt-8 flow-root">
         <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
           <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
@@ -93,6 +93,7 @@ export default async function UsersTable(props: any) {
                 </tr>
               </thead>
               <tbody className=" divide-y divide-gray-200 bg-white">
+                <Suspense fallback={<div>Loading...</div>}>
                 {props.data.map((item: any) => (
                   <tr key={item.uuid}>
                     <td className="whitespace-wrap flex items-center py-4 pl-4 pr-3 text-xs font-medium text-gray-900 ">
@@ -113,15 +114,12 @@ export default async function UsersTable(props: any) {
                     </td>
                   </tr>
                 ))}
-
+                </Suspense>
               </tbody>
-
             </table>
-
           </div>
         </div>
       </div>
     </div>
-
   );
-}
+}