diff --git a/frontend/src/pages/RunDetails.tsx b/frontend/src/pages/RunDetails.tsx
index afca9e5f0a47..9d25c137fcbe 100644
--- a/frontend/src/pages/RunDetails.tsx
+++ b/frontend/src/pages/RunDetails.tsx
@@ -101,6 +101,7 @@ interface SelectedNodeDetails {
 
 // exported only for testing
 export interface RunDetailsInternalProps {
+  isLoading?: boolean;
   runId?: string;
   gkeMetadata: GkeMetadata;
 }
@@ -237,6 +238,10 @@ class RunDetails extends Page<RunDetailsInternalProps, RunDetailsState> {
   }
 
   public render(): JSX.Element {
+    if (this.props.isLoading) {
+      return <div>Currently loading run information</div>;
+    }
+
     const {
       allArtifactConfigs,
       allowCustomVisualizations,
diff --git a/frontend/src/pages/RunDetailsRouter.tsx b/frontend/src/pages/RunDetailsRouter.tsx
index f9505233c8ea..ee6e0a970475 100644
--- a/frontend/src/pages/RunDetailsRouter.tsx
+++ b/frontend/src/pages/RunDetailsRouter.tsx
@@ -70,9 +70,5 @@ export default function RunDetailsRouter(props: RunDetailsProps) {
     }
   }
 
-  if (runIsFetching || templateStrIsFetching) {
-    return <div>Currently loading run information</div>;
-  }
-
-  return <EnhancedRunDetails {...props} />;
+  return <EnhancedRunDetails {...props} isLoading={runIsFetching || templateStrIsFetching} />;
 }