fix detail member

src/pages/members/manage-members/blocks/ListToolBar.tsx

@@ -1,12 +1,20 @@
-import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { Button } from '@/components/ui/button';
+import { UserPlus } from 'lucide-react';
+import { KeenIcon, useDataGrid } from '@/components';
+import { DefaultTooltip } from '@/components';
 import { useState } from 'react';
 
-const ListToolbar = ({ createMember }: { createMember: () => void }) => {
-  const { table, reload } = useDataGrid();
-  const [   usernameFilter, setUsernameFilter] = useState('');
-  const [emailFilter, setEmailFilter] = useState('');
+interface ListToolbarProps {
+  createMember: () => void;
+  onReload: () => void;
+  isReloading: boolean;
+}
 
+const ListToolbar = ({ createMember, onReload, isReloading }: ListToolbarProps) => {
+
+  const [emailFilter, setEmailFilter] = useState('');
+  const [usernameFilter, setUsernameFilter] = useState('');
+  const {table}=useDataGrid();
   const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setUsernameFilter(e.target.value);
     table.getColumn('username')?.setFilterValue(e.target.value);
@@ -31,16 +39,23 @@ const ListToolbar = ({ createMember }: { createMember: () => void }) => {
             />
           </div>
           <div className="flex gap-3 items-center">
-            <Button
-              variant="outline"
-              className="h-7.5 text-[0.8rem]"
-              onClick={createMember}
-            >
+            <Button variant="outline" className="h-7.5 text-[0.8rem]" onClick={createMember}>
               Add Data
             </Button>
-            <DefaultTooltip title={'Refresh'} placement={'top'}>
-              <Button variant="outline" className="h-7.5" onClick={() => reload()}>
-                <KeenIcon icon="arrows-circle" />
+            <DefaultTooltip title={isReloading ? 'Refreshing...' : 'Refresh'} placement={'top'}>
+              <Button 
+                variant="outline" 
+                className="h-7.5" 
+                onClick={onReload}
+                disabled={isReloading}
+              >
+                {isReloading ? (
+                  <div className="animate-spin">
+                    <KeenIcon icon="arrows-circle" />
+                  </div>
+                ) : (
+                  <KeenIcon icon="arrows-circle" />
+                )}
               </Button>
             </DefaultTooltip>
           </div>
@@ -50,4 +65,4 @@ const ListToolbar = ({ createMember }: { createMember: () => void }) => {
   );
 };
 
-export default ListToolbar;
+export default ListToolbar;