diff --git a/frontend/src/component/insights/GraphCover.tsx b/frontend/src/component/insights/GraphCover.tsx
new file mode 100644
index 0000000000..915acb7ac9
--- /dev/null
+++ b/frontend/src/component/insights/GraphCover.tsx
@@ -0,0 +1,32 @@
+import { styled } from '@mui/material';
+import type { FC, PropsWithChildren } from 'react';
+
+const StyledCover = styled('div')(({ theme }) => ({
+    position: 'absolute',
+    inset: 0,
+    display: 'flex',
+    zIndex: theme.zIndex.appBar,
+    '&::before': {
+        zIndex: theme.zIndex.fab,
+        content: '""',
+        position: 'absolute',
+        inset: 0,
+        backgroundColor: theme.palette.background.paper,
+        opacity: 0.8,
+    },
+}));
+
+const StyledCoverContent = styled('div')(({ theme }) => ({
+    zIndex: theme.zIndex.modal,
+    margin: 'auto',
+    color: theme.palette.text.secondary,
+    textAlign: 'center',
+}));
+
+export const GraphCover: FC<PropsWithChildren> = ({ children }) => {
+    return (
+        <StyledCover>
+            <StyledCoverContent>{children}</StyledCoverContent>
+        </StyledCover>
+    );
+};
diff --git a/frontend/src/component/insights/components/LineChart/LineChartComponent.tsx b/frontend/src/component/insights/components/LineChart/LineChartComponent.tsx
index 5c684742bc..f9f71688bc 100644
--- a/frontend/src/component/insights/components/LineChart/LineChartComponent.tsx
+++ b/frontend/src/component/insights/components/LineChart/LineChartComponent.tsx
@@ -26,33 +26,12 @@ import { styled } from '@mui/material';
 import { createOptions } from './createChartOptions.ts';
 import merge from 'deepmerge';
 import { customHighlightPlugin } from 'component/common/Chart/customHighlightPlugin.ts';
+import { GraphCover } from 'component/insights/GraphCover.tsx';
 
 const StyledContainer = styled('div')(({ theme }) => ({
     position: 'relative',
 }));
 
-const StyledCover = styled('div')(({ theme }) => ({
-    position: 'absolute',
-    inset: 0,
-    display: 'flex',
-    zIndex: theme.zIndex.appBar,
-    '&::before': {
-        zIndex: theme.zIndex.fab,
-        content: '""',
-        position: 'absolute',
-        inset: 0,
-        backgroundColor: theme.palette.background.paper,
-        opacity: 0.8,
-    },
-}));
-
-const StyledCoverContent = styled('div')(({ theme }) => ({
-    zIndex: theme.zIndex.modal,
-    margin: 'auto',
-    color: theme.palette.text.secondary,
-    textAlign: 'center',
-}));
-
 function mergeAll<T>(objects: Partial<T>[]): T {
     return merge.all<T>(objects.filter((i) => i));
 }
@@ -113,11 +92,7 @@ const LineChartComponent: FC<{
                     )
                 }
                 elseShow={
-                    <StyledCover>
-                        <StyledCoverContent>
-                            {cover !== true ? cover : ' '}
-                        </StyledCoverContent>
-                    </StyledCover>
+                    <GraphCover>{cover !== true ? cover : ' '}</GraphCover>
                 }
             />
         </StyledContainer>
diff --git a/frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveChart.tsx b/frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveChart.tsx
index 12838a7a09..413e6738b8 100644
--- a/frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveChart.tsx
+++ b/frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveChart.tsx
@@ -2,7 +2,7 @@ import 'chartjs-adapter-date-fns';
 import { type FC, useMemo, useState } from 'react';
 import type { InstanceInsightsSchema } from 'openapi';
 import { useProjectChartData } from 'component/insights/hooks/useProjectChartData';
-import { styled, useTheme } from '@mui/material';
+import { useTheme } from '@mui/material';
 import type { GroupedDataByProject } from 'component/insights/hooks/useGroupedProjectTrends';
 import {
     CategoryScale,
@@ -26,6 +26,7 @@ import { customHighlightPlugin } from 'component/common/Chart/customHighlightPlu
 import { NotEnoughData } from 'component/insights/components/LineChart/LineChart.tsx';
 import { placeholderData } from './placeholderData.ts';
 import { Bar } from 'react-chartjs-2';
+import { GraphCover } from 'component/insights/GraphCover.tsx';
 
 ChartJS.register(
     CategoryScale,
@@ -46,28 +47,6 @@ interface ICreationArchiveChartProps {
     isLoading?: boolean;
 }
 
-const StyledCover = styled('div')(({ theme }) => ({
-    position: 'absolute',
-    inset: 0,
-    display: 'flex',
-    zIndex: theme.zIndex.appBar,
-    '&::before': {
-        zIndex: theme.zIndex.fab,
-        content: '""',
-        position: 'absolute',
-        inset: 0,
-        backgroundColor: theme.palette.background.paper,
-        opacity: 0.8,
-    },
-}));
-
-const StyledCoverContent = styled('div')(({ theme }) => ({
-    zIndex: theme.zIndex.modal,
-    margin: 'auto',
-    color: theme.palette.text.secondary,
-    textAlign: 'center',
-}));
-
 export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
     creationArchiveTrends,
     isLoading,
@@ -231,7 +210,7 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
                 },
             },
         }),
-        [theme, locationSettings, setTooltip],
+        [theme, locationSettings, setTooltip, useGraphCover],
     );
 
     return (
@@ -249,11 +228,9 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
             />
             <CreationArchiveRatioTooltip tooltip={tooltip} />
             {useGraphCover ? (
-                <StyledCover>
-                    <StyledCoverContent>
-                        {notEnoughData ? <NotEnoughData /> : isLoading}
-                    </StyledCoverContent>
-                </StyledCover>
+                <GraphCover>
+                    {notEnoughData ? <NotEnoughData /> : isLoading}
+                </GraphCover>
             ) : null}
         </>
     );