diff --git a/web/src/app/app/(primary_layout)/(chat_experience)/chats/[chatId]/metrics/[metricId]/loading.tsx b/web/src/app/app/(primary_layout)/(chat_experience)/chats/[chatId]/metrics/[metricId]/loading.tsx
index 78760d4a7..02fb527af 100644
--- a/web/src/app/app/(primary_layout)/(chat_experience)/chats/[chatId]/metrics/[metricId]/loading.tsx
+++ b/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 />;
 }
diff --git a/web/src/app/app/(primary_layout)/(chat_experience)/chats/[chatId]/metrics/[metricId]/page.tsx b/web/src/app/app/(primary_layout)/(chat_experience)/chats/[chatId]/metrics/[metricId]/page.tsx
index 06670e7c4..b79986f6c 100644
--- a/web/src/app/app/(primary_layout)/(chat_experience)/chats/[chatId]/metrics/[metricId]/page.tsx
+++ b/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 }>;
diff --git a/web/src/app/app/(primary_layout)/(chat_experience)/chats/[chatId]/reasoning/[messageId]/loading.tsx b/web/src/app/app/(primary_layout)/(chat_experience)/chats/[chatId]/reasoning/[messageId]/loading.tsx
new file mode 100644
index 000000000..02fb527af
--- /dev/null
+++ b/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 />;
+}
diff --git a/web/src/components/features/FileIndeterminateLoader.tsx b/web/src/components/features/FileIndeterminateLoader.tsx
index ed0444a23..7498d54cf 100644
--- a/web/src/components/features/FileIndeterminateLoader.tsx
+++ b/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>
   );
 };