💄 show loading animation on http request logs table

src/components/LogDataTable.tsx

@@ -28,6 +28,7 @@ import {
     ChevronRight,
     Download,
     Loader,
+    LoaderIcon,
     RefreshCw
 } from "lucide-react";
 import { useTranslations } from "next-intl";
@@ -427,7 +428,7 @@ export function LogDataTable<TData, TValue>({
                         )}
                     </div>
                 </CardHeader>
-                <CardContent>
+                <CardContent className="relative">
                     <Table>
                         <TableHeader>
                             {table.getHeaderGroups().map((headerGroup) => (
@@ -535,6 +536,19 @@ export function LogDataTable<TData, TValue>({
                             )}
                         </TableBody>
                     </Table>
+
+                    {isLoading && (
+                        <>
+                            <div className="backdrop-blur-[2px] z-10 absolute inset-0 top-10"></div>
+                            <div className="absolute z-20 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 border border-border rounded-md bg-muted">
+                                <div className="flex items-center gap-2 p-6">
+                                    <LoaderIcon className="size-4 animate-spin" />
+                                    {t("loadingEllipsis")}
+                                </div>
+                            </div>
+                        </>
+                    )}
+
                     <div className="mt-4">
                         <DataTablePagination
                             table={table}