changed to cirular progress (#148)

* changed to cirular progress

* codeRabbit suggestions

Author: gurinder39

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

@@ -1,11 +1,12 @@
-import React, { useState, useEffect, FC } from 'react';
+import React, { useState, useEffect, FC, PropsWithChildren } from 'react';
 import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom';
 
 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';
@@ -15,33 +16,22 @@ import { FNDashboardProps } from './types';
 
 type FnAppProviderProps = Pick<FNDashboardProps, 'fnError'>;
 
-export const FnAppProvider: FC<FnAppProviderProps> = (props) => {
-  const { children, fnError = null } = props;
+export const FnAppProvider: FC<PropsWithChildren<FnAppProviderProps>> = (props) => {
+  const { children } = props;
 
   const [ready, setReady] = useState(false);
   navigationLogger('AppWrapper', false, 'rendering');
   useEffect(() => {
     loadAndInitAngularIfEnabled()
       .then(() => {
         setReady(true);
-        // $('.preloader').remove();
       })
       .catch((err) => console.error(err));
     return () => {};
   }, []);
 
-  if (!ready) {
-    /**
-     * TODO: I think loader would be better
-     */
-    return <>{fnError}</>;
-  }
-
-  if (!store) {
-    /**
-     * TODO: I think loader would be better
-     */
-    return <>{fnError}</>;
+  if (!store || !ready) {
+    return <FnLoader />;
   }
 
   return (

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

@@ -22818,41 +22818,10 @@ __metadata:
 
 "merge2@npm:^1.2.3, merge2@npm:^1.3.0, merge2@npm:^1.4.1":
   version: 1.4.1
-  resolution: "merge2@npm:1.4.1"
   checksum: 10/7268db63ed5169466540b6fb947aec313200bcf6d40c5ab722c22e242f651994619bcd85601602972d3c85bd2cc45a358a4c61937e9f11a061919a1da569b0c2
   languageName: node
   linkType: hard
 
-"methods@npm:~1.1.2":
-  version: 1.1.2
-  resolution: "methods@npm:1.1.2"
-  checksum: 10/a385dd974faa34b5dd021b2bbf78c722881bf6f003bfe6d391d7da3ea1ed625d1ff10ddd13c57531f628b3e785be38d3eed10ad03cebd90b76932413df9a1820
-  languageName: node
-  linkType: hard
-
-"micro-memoize@npm:^4.1.2":
-  version: 4.1.2
-  resolution: "micro-memoize@npm:4.1.2"
-  checksum: 10/027e90c3147c97c07224440ea50ede27eb7d888149e4925820397b466d16efc525f5ec3981e4cadec3258a8d36dfd5e7e7c8e660879fbe2e47106785be9bc570
-  languageName: node
-  linkType: hard
-
-"micromark-core-commonmark@npm:^2.0.0":
-  version: 2.0.1
-  resolution: "micromark-core-commonmark@npm:2.0.1"
-  dependencies:
-    decode-named-character-reference: "npm:^1.0.0"
-    devlop: "npm:^1.0.0"
-    micromark-factory-destination: "npm:^2.0.0"
-    micromark-factory-label: "npm:^2.0.0"
-    micromark-factory-space: "npm:^2.0.0"
-    micromark-factory-title: "npm:^2.0.0"
-    micromark-factory-whitespace: "npm:^2.0.0"
-    micromark-util-character: "npm:^2.0.0"
-    micromark-util-chunked: "npm:^2.0.0"
-    micromark-util-classify-character: "npm:^2.0.0"
-    micromark-util-html-tag-name: "npm:^2.0.0"
-    micromark-util-normalize-identifier: "npm:^2.0.0"
     micromark-util-resolve-all: "npm:^2.0.0"
     micromark-util-subtokenize: "npm:^2.0.0"
     micromark-util-symbol: "npm:^2.0.0"