Add loading ui

.eslintrc.cjs

@@ -38,6 +38,7 @@ module.exports = {
         plugins: ["prettier-plugin-tailwindcss"],
       },
     ],
+    "react/no-array-index-key": "off",
     "@typescript-eslint/no-shadow": "off",
     "import/order": [
       "warn",

src/app/loading.tsx

@@ -0,0 +1,20 @@
+import Skeleton from "~/ui/components/feedback/skeleton";
+
+export default function LoadingPage() {
+  return (
+    <div className="p-4">
+      <div className="flex items-center justify-between gap-4">
+        <Skeleton className="h-10 w-full max-w-xs" />
+        <div className="flex space-x-2">
+          <Skeleton className="h-10 w-10 rounded-md" />
+          <Skeleton className="h-10 w-10 rounded-md" />
+        </div>
+      </div>
+      <div className="mt-4 flex flex-col gap-4">
+        {Array.from({length: 3}).map((_, index) => (
+          <Skeleton key={index} className="h-24 w-full rounded-md" />
+        ))}
+      </div>
+    </div>
+  );
+}

src/modules/ui/components/feedback/skeleton.tsx

@@ -0,0 +1,5 @@
+import {cn} from "../../utils";
+
+export default function Skeleton({className, ...props}: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("animate-pulse rounded-md bg-muted", className)} {...props} />;
+}