metric page loader

web/src/app/app/(primary_layout)/(chat_experience)/chats/[chatId]/metrics/[metricId]/loading.tsx

@@ -1,3 +1,5 @@
+import { FileIndeterminateLoader } from '@/components/features/FileIndeterminateLoader';
+
 export default function Loading() {
-  return <div>Loading this metric...</div>;
+  return <FileIndeterminateLoader />;
 }

web/src/app/app/(primary_layout)/(chat_experience)/chats/[chatId]/metrics/[metricId]/page.tsx

@@ -1,5 +1,6 @@
 import { MetricController } from '@/controllers/MetricController';
 import { AppAssetCheckLayout } from '@/layouts/AppAssetCheckLayout';
+import { timeout } from '@/lib';
 
 export default async function Page(props: {
   params: Promise<{ chatId: string; metricId: string }>;

web/src/app/app/(primary_layout)/(chat_experience)/chats/[chatId]/reasoning/[messageId]/loading.tsx

@@ -0,0 +1,5 @@
+import { FileIndeterminateLoader } from '@/components/features/FileIndeterminateLoader';
+
+export default function Loading() {
+  return <FileIndeterminateLoader />;
+}

web/src/components/features/FileIndeterminateLoader.tsx

@@ -4,7 +4,10 @@ import React from 'react';
 export const FileIndeterminateLoader: React.FC = () => {
   return (
     <div className="relative z-10 h-0 overflow-visible">
-      <IndeterminateLinearLoader className="absolute top-0 left-0 w-full" />
+      <IndeterminateLinearLoader
+        className="absolute top-0 left-0 w-full"
+        trackColor="transparent"
+      />
     </div>
   );
 };