fix loading page, add delete edit manage menu, search manage user

src/components/data-grid/DataGridContext.tsx

@@ -181,6 +181,7 @@ export const DataGridProvider = <TData extends object>(props: TDataGridProps<TDa
         reload: loadData
       }}
     >
+      {loading && <div className="fixed inset-0 flex items-center justify-center z-50"></div>}
       {props.children ? props.children : <DataGridInner />}
     </DataGridContext.Provider>
   );

src/components/data-grid/DataGridLoader.tsx

@@ -5,10 +5,10 @@ export const DataGridLoader = () => {
   const { props } = useDataGrid();
 
   return (
-    <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+    <div className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center gap-6 min-w-[160px] bg-card text-muted-foreground px-4 py-2 font-medium leading-none text-sm border shadow-sm rounded-md">
       <div className="text-muted-foreground bg-card  flex items-center gap-2 px-4 py-2 font-medium leading-none text-sm border shadow-sm rounded-md">
         <svg
-          className="animate-spin -ml-1 h-5 w-5 text-muted-foreground"
+          className="animate-spin -ml-1 h-5 w-5 text-muted-foreground flex-shrink-0"
           xmlns="http://www.w3.org/2000/svg"
           fill="none"
           viewBox="0 0 24 24"