feat(ui): add loading states for api-docs, files, imports, and layouts pages

app/api-docs/loading.tsx

@@ -0,0 +1,20 @@
+export default function DashboardLoading() {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800">
+      <div className="flex flex-col items-center space-y-4">
+        <div className="relative">
+          <div className="h-16 w-16 rounded-full border-4 border-slate-200 dark:border-slate-700"></div>
+          <div className="absolute inset-0 h-16 w-16 rounded-full border-4 border-transparent border-t-blue-500 animate-spin"></div>
+        </div>
+        <div className="text-center">
+          <h2 className="text-lg font-semibold text-slate-700 dark:text-slate-200">
+            Loading Api Documentation
+          </h2>
+          <p className="text-sm text-slate-500 dark:text-slate-400">
+            Preparing your workspace...
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

app/components/imports/ImportDetailDialog.tsx

@@ -122,6 +122,12 @@ export function ImportDetailDialog({ open, onOpenChange, importId }: ImportDetai
     return (
       <Dialog open={open} onOpenChange={onOpenChange}>
         <DialogContent className="max-w-4xl max-h-[80vh]">
+          <DialogHeader>
+            <DialogTitle>Loading Import Details</DialogTitle>
+            <DialogDescription>
+              Please wait while we load the import information...
+            </DialogDescription>
+          </DialogHeader>
           <div className="flex justify-center py-8">
             <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
           </div>

app/files/loading.tsx

@@ -0,0 +1,20 @@
+export default function DashboardLoading() {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800">
+      <div className="flex flex-col items-center space-y-4">
+        <div className="relative">
+          <div className="h-16 w-16 rounded-full border-4 border-slate-200 dark:border-slate-700"></div>
+          <div className="absolute inset-0 h-16 w-16 rounded-full border-4 border-transparent border-t-blue-500 animate-spin"></div>
+        </div>
+        <div className="text-center">
+          <h2 className="text-lg font-semibold text-slate-700 dark:text-slate-200">
+            Loading Files
+          </h2>
+          <p className="text-sm text-slate-500 dark:text-slate-400">
+            Preparing your workspace...
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

app/imports/loading.tsx

@@ -0,0 +1,20 @@
+export default function DashboardLoading() {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800">
+      <div className="flex flex-col items-center space-y-4">
+        <div className="relative">
+          <div className="h-16 w-16 rounded-full border-4 border-slate-200 dark:border-slate-700"></div>
+          <div className="absolute inset-0 h-16 w-16 rounded-full border-4 border-transparent border-t-blue-500 animate-spin"></div>
+        </div>
+        <div className="text-center">
+          <h2 className="text-lg font-semibold text-slate-700 dark:text-slate-200">
+            Loading Imports
+          </h2>
+          <p className="text-sm text-slate-500 dark:text-slate-400">
+            Preparing your workspace...
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

app/layout-configurations/loading.tsx

@@ -0,0 +1,20 @@
+export default function DashboardLoading() {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800">
+      <div className="flex flex-col items-center space-y-4">
+        <div className="relative">
+          <div className="h-16 w-16 rounded-full border-4 border-slate-200 dark:border-slate-700"></div>
+          <div className="absolute inset-0 h-16 w-16 rounded-full border-4 border-transparent border-t-blue-500 animate-spin"></div>
+        </div>
+        <div className="text-center">
+          <h2 className="text-lg font-semibold text-slate-700 dark:text-slate-200">
+            Loading Layouts
+          </h2>
+          <p className="text-sm text-slate-500 dark:text-slate-400">
+            Preparing your workspace...
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}