diff --git a/ui/components/ClusterOverview/PageLayout.stories.tsx b/ui/components/ClusterOverview/PageLayout.stories.tsx
index 734e1306f..80a3bfdca 100644
--- a/ui/components/ClusterOverview/PageLayout.stories.tsx
+++ b/ui/components/ClusterOverview/PageLayout.stories.tsx
@@ -3,6 +3,7 @@ import { composeStories } from "@storybook/react";
 import * as ClusterCardStories from "./ClusterCard.stories";
 import { PageLayout } from "./PageLayout";
 import * as TopicsPartitionsCardStories from "./TopicsPartitionsCard.stories";
+import { ReconciliationContext } from "../ReconciliationContext";
 
 const { WithData: ClusterWithData } = composeStories(ClusterCardStories);
 const { WithData: TopicsPartitionsWithData } = composeStories(
@@ -30,12 +31,19 @@ export const WithData: Story = {
 };
 export const Loading: Story = {
   render: (args) => (
-    <PageLayout
-      {...args}
-      clusterOverview={<Everloading />}
-      clusterCharts={<Everloading />}
-      topicsPartitions={<Everloading />}
-    />
+    <ReconciliationContext.Provider
+      value={{
+        isReconciliationPaused: false,
+        setReconciliationPaused: () => { },
+      }}
+    >
+      <PageLayout
+        {...args}
+        clusterOverview={<Everloading />}
+        clusterCharts={<Everloading />}
+        topicsPartitions={<Everloading />}
+      />
+    </ReconciliationContext.Provider>
   ),
 };