From 24e1aa8333716feb0945749ca35ab0ac20d2641c Mon Sep 17 00:00:00 2001
From: Gurinder Singh <gurinder.rawala@fluxninja.com>
Date: Tue, 12 Dec 2023 13:54:06 -0500
Subject: [PATCH] loader color fix

---
 .../components/DashboardLoading/FnLoader.tsx  | 51 +++++++++++--------
 1 file changed, 30 insertions(+), 21 deletions(-)

diff --git a/public/app/features/dashboard/components/DashboardLoading/FnLoader.tsx b/public/app/features/dashboard/components/DashboardLoading/FnLoader.tsx
index 751ae08e747ca..e78b27c055e12 100644
--- a/public/app/features/dashboard/components/DashboardLoading/FnLoader.tsx
+++ b/public/app/features/dashboard/components/DashboardLoading/FnLoader.tsx
@@ -1,6 +1,8 @@
 import { Box, CircularProgress, CircularProgressProps, Typography, type BoxProps } from '@mui/material';
 import React, { type ReactNode, type FC, type HTMLAttributes } from 'react';
 
+import { useTheme2 } from '@grafana/ui';
+
 import logoUrl from './fn-logo.svg';
 
 export type FnLoaderProps = {
@@ -17,25 +19,32 @@ export const FnLoader: FC<FnLoaderProps> = ({
   circularProgressProps,
   imageProps,
   text,
-}) => (
-  <Box
-    display="flex"
-    justifyContent="center"
-    alignItems="center"
-    flexDirection="column"
-    paddingTop="150px"
-    {...outerContainerProps}
-  >
-    <img src={logoUrl} alt={'FluxNinja logo'} style={{ transform: 'scale(4)' }} {...imageProps} />
-    <Box marginTop="100px" {...innerContainerProps}>
-      <CircularProgress
-        role="alert"
-        aria-busy="true"
-        aria-label="Loading..."
-        disableShrink
-        {...circularProgressProps}
-      />
+}) => {
+  const theme = useTheme2();
+
+  return (
+    <Box
+      display="flex"
+      justifyContent="center"
+      alignItems="center"
+      flexDirection="column"
+      paddingTop="150px"
+      {...outerContainerProps}
+    >
+      <img src={logoUrl} alt={'FluxNinja logo'} style={{ transform: 'scale(4)' }} {...imageProps} />
+      <Box marginTop="100px" {...innerContainerProps}>
+        <CircularProgress
+          role="alert"
+          aria-busy="true"
+          aria-label="Loading..."
+          disableShrink
+          sx={{
+            color: theme.colors.primary.main,
+          }}
+          {...circularProgressProps}
+        />
+      </Box>
+      {typeof text === 'string' ? <Typography>{text}</Typography> : text || null}
     </Box>
-    {typeof text === 'string' ? <Typography>{text}</Typography> : text || null}
-  </Box>
-);
+  );
+};