changed to cirular progress

Author: gurinder39

package.json

@@ -355,7 +355,6 @@
     "kbar": "0.1.0-beta.40",
     "lodash": "4.17.21",
     "logfmt": "^1.3.2",
-    "lottie-react": "^2.4.0",
     "lru-cache": "10.0.0",
     "lru-memoize": "^1.1.0",
     "marked": "5.1.1",

public/app/features/dashboard/components/DashboardLoading/FnLoader.tsx

@@ -1,22 +1,20 @@
-import { Box, Typography, type BoxProps } from '@mui/material';
-import Lottie, { type LottieComponentProps } from 'lottie-react';
+import { Box, CircularProgress, CircularProgressProps, Typography, type BoxProps } from '@mui/material';
 import React, { type ReactNode, type FC, type HTMLAttributes } from 'react';
 
 import logoUrl from './fn-logo.svg';
-import logoLoader from './fn-lottie-loader.json';
 
 export type FnLoaderProps = {
   outerContainerProps?: Omit<BoxProps, 'children'>;
   innerContainerProps?: Omit<BoxProps, 'children'>;
-  lottieProps?: LottieComponentProps;
+  circularProgressProps?: CircularProgressProps;
   imageProps?: HTMLAttributes<HTMLImageElement>;
   text?: ReactNode;
 };
 
 export const FnLoader: FC<FnLoaderProps> = ({
   outerContainerProps,
   innerContainerProps,
-  lottieProps,
+  circularProgressProps,
   imageProps,
   text,
 }) => (
@@ -30,11 +28,12 @@ export const FnLoader: FC<FnLoaderProps> = ({
   >
     <img src={logoUrl} alt={'FluxNinja logo'} style={{ transform: 'scale(4)' }} {...imageProps} />
     <Box marginTop="100px" {...innerContainerProps}>
-      <Lottie
-        animationData={logoLoader}
+      <CircularProgress
+        role="alert"
+        aria-busy="true"
         aria-label="Loading..."
-        style={{ maxWidth: '150px', margin: '0 auto' }}
-        {...lottieProps}
+        disableShrink
+        {...circularProgressProps}
       />
     </Box>
     {typeof text === 'string' ? <Typography>{text}</Typography> : text || null}

public/app/features/dashboard/components/DashboardLoading/fn-lottie-loader.json

@@ -6,6 +6,7 @@ import { config, navigationLogger } from '@grafana/runtime';
 import { ErrorBoundaryAlert, GlobalStyles } from '@grafana/ui';
 import { loadAndInitAngularIfEnabled } from 'app/angular/loadAndInitAngularIfEnabled';
 import { ThemeProvider } from 'app/core/utils/ConfigProvider';
+import { FnLoader } from 'app/features/dashboard/components/DashboardLoading/FnLoader';
 import { store } from 'app/store/store';
 
 import { GrafanaContext } from '../core/context/GrafanaContext';
@@ -31,16 +32,10 @@ export const FnAppProvider: FC<PropsWithChildren<FnAppProviderProps>> = (props)
   }, []);
 
   if (!ready) {
-    /**
-     * TODO: I think loader would be better
-     */
-    return <>{fnError}</>;
+    return <FnLoader />;
   }
 
   if (!store) {
-    /**
-     * TODO: I think loader would be better
-     */
     return <>{fnError}</>;
   }
 

public/app/fn-app/fn-app-provider.tsx

@@ -19954,7 +19954,6 @@ __metadata:
     lint-staged: 13.2.3
     lodash: 4.17.21
     logfmt: ^1.3.2
-    lottie-react: ^2.4.0
     lru-cache: 10.0.0
     lru-memoize: ^1.1.0
     marked: 5.1.1
@@ -23542,25 +23541,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lottie-react@npm:^2.4.0":
-  version: 2.4.0
-  resolution: "lottie-react@npm:2.4.0"
-  dependencies:
-    lottie-web: ^5.10.2
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: e9ea4a89be90a29bde4a83956f76a80d1f8031882f18ea38ef5271d2aafd8e68348ae6297f185ed85b149ca4896fe33aee7faf9780b88a1b289b8e146f477448
-  languageName: node
-  linkType: hard
-
-"lottie-web@npm:^5.10.2":
-  version: 5.12.2
-  resolution: "lottie-web@npm:5.12.2"
-  checksum: af5bc3bc405fd760de8b17a36158d5a8c3e8c586c711d0c63681ddf056b65bc6b54ea36b1fcad782fb02dbe12e696a40e0ba72daf41b8f10ab5b5d1113793636
-  languageName: node
-  linkType: hard
-
 "lower-case@npm:^2.0.2":
   version: 2.0.2
   resolution: "lower-case@npm:2.0.2"