page loading

packages/apps/src/app/globals.css

@@ -50,6 +50,21 @@ body {
   background: linear-gradient(180deg, #02061f 0%, #1c1837 100%);
 }
 
+.loading-bar {
+  background: linear-gradient(90deg, #ffffff 35%, #00b2ff 50%, #ffffff 65%);
+  background-position: 100% 50%;
+  background-size: 40% 100%;
+  animation: bar-loading 2.4s linear infinite;
+}
+@keyframes bar-loading {
+  0% {
+    background-position: 0% 50%;
+  }
+  100% {
+    background-position: 100% 50%;
+  }
+}
+
 .refresh-countdown {
   animation: countdown-dash 9.3s linear infinite;
   animation-delay: 0.7s;

packages/apps/src/app/loading.tsx

@@ -0,0 +1,9 @@
+import CountLoading from "@/ui/count-loading";
+
+export default function Loading() {
+  return (
+    <div className="app-main flex items-center justify-center">
+      <CountLoading size="large" />
+    </div>
+  );
+}

packages/apps/src/app/records/[id]/loading.tsx

@@ -0,0 +1,7 @@
+export default function Loading() {
+  return (
+    <main className="app-main">
+      <div className="loading-bar fixed left-0 top-0 z-50 h-[2px] w-full" />
+    </main>
+  );
+}

packages/apps/src/app/records/loading.tsx

@@ -0,0 +1,7 @@
+export default function Loading() {
+  return (
+    <main className="app-main">
+      <div className="loading-bar fixed left-0 top-0 z-50 h-[2px] w-full" />
+    </main>
+  );
+}