Add fnLoader in grafana instead of using a prop from parent mfe

package.json

@@ -354,6 +354,7 @@
     "kbar": "0.1.0-beta.40",
     "lodash": "4.17.21",
     "logfmt": "^1.3.2",
+    "lottie-react": "^2.4.0",
     "lru-cache": "7.17.0",
     "lru-memoize": "^1.1.0",
     "memoize-one": "6.0.0",

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

@@ -0,0 +1,42 @@
+import { Box, Typography, type BoxProps } from '@mui/material';
+import Lottie, { type LottieComponentProps } from 'lottie-react';
+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;
+  imageProps?: HTMLAttributes<HTMLImageElement>;
+  text?: ReactNode;
+};
+
+export const FnLoader: FC<FnLoaderProps> = ({
+  outerContainerProps,
+  innerContainerProps,
+  lottieProps,
+  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}>
+      <Lottie
+        animationData={logoLoader}
+        aria-label="Loading..."
+        style={{ maxWidth: '150px', margin: '0 auto' }}
+        {...lottieProps}
+      />
+    </Box>
+    {typeof text === 'string' ? <Typography>{text}</Typography> : text || null}
+  </Box>
+);

public/app/features/dashboard/containers/DashboardPage.tsx

@@ -1,6 +1,6 @@
 import { css, cx } from '@emotion/css';
-import { isUndefined, isEmpty, noop } from 'lodash';
-import React, { PureComponent, } from 'react';
+import { isEmpty, noop } from 'lodash';
+import React, { PureComponent } from 'react';
 import DropZone, { FileRejection, DropEvent, ErrorCode } from 'react-dropzone';
 import { connect, ConnectedProps, MapDispatchToProps, MapStateToProps } from 'react-redux';
 
@@ -42,7 +42,7 @@ import { cancelVariables, templateVarsChangedInUrl } from '../../variables/state
 import { findTemplateVarChanges } from '../../variables/utils';
 import { DashNav } from '../components/DashNav';
 import { DashboardFailed } from '../components/DashboardLoading/DashboardFailed';
-import { DashboardLoading } from '../components/DashboardLoading/DashboardLoading';
+import { FnLoader } from '../components/DashboardLoading/FnLoader';
 import { DashboardPrompt } from '../components/DashboardPrompt/DashboardPrompt';
 import { DashboardSettings } from '../components/DashboardSettings';
 import { PanelInspector } from '../components/Inspector/PanelInspector';
@@ -118,8 +118,7 @@ type OwnProps = {
   isPublic?: boolean;
   controlsContainer?: string | null;
   version?: FNDashboardProps['version'];
-  fnLoader?: FNDashboardProps['fnLoader'];
-  isLoading?: FNDashboardProps['isLoading']
+  isLoading?: FNDashboardProps['isLoading'];
 };
 
 export type DashboardPageProps = OwnProps &
@@ -444,17 +443,18 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
   }
 
   render() {
-    const { dashboard, initError, queryParams, isPublic, FNDashboard, fnLoader, isLoading = noop } = this.props;
+    const { dashboard, initError, queryParams, isPublic, FNDashboard, isLoading = noop } = this.props;
     const { editPanel, viewPanel, updateScrollTop, pageNav, sectionNav } = this.state;
     const kioskMode = FNDashboard ? KioskMode.FN : !isPublic ? getKioskMode(this.props.queryParams) : KioskMode.Full;
 
     if (!dashboard || isEmpty(queryParams)) {
-      isLoading(true)
+      isLoading(true);
 
-      return isUndefined(fnLoader) ? <DashboardLoading initPhase={this.props.initPhase} />: <>{fnLoader}</>;
+      // return isUndefined(fnLoader) ? <DashboardLoading initPhase={this.props.initPhase} />: <>{fnLoader}</>;
+      return <FnLoader />;
     }
 
-    isLoading(false)
+    isLoading(false);
 
     const inspectPanel = this.getInspectPanel();
     const showSubMenu = !editPanel && !this.props.queryParams.editview;

public/app/fn-app/fn-dashboard-page/render-fn-dashboard.tsx

@@ -27,7 +27,7 @@ const DEFAULT_DASHBOARD_PAGE_PROPS: Pick<DashboardPageProps, 'history' | 'route'
 };
 
 export const RenderFNDashboard: FC<FNDashboardProps> = (props) => {
-  const { queryParams, controlsContainer, setErrors, fnLoader, hiddenVariables, isLoading } = props;
+  const { queryParams, controlsContainer, setErrors, hiddenVariables, isLoading } = props;
 
   const firstError = useSelector((state: StoreState) => {
     const { appNotifications } = state;
@@ -66,10 +66,9 @@ export const RenderFNDashboard: FC<FNDashboardProps> = (props) => {
         queryParams,
         hiddenVariables,
         controlsContainer,
-        fnLoader,
         isLoading
       }),
-    [controlsContainer, fnLoader, hiddenVariables, isLoading, props, queryParams]
+    [controlsContainer, hiddenVariables, isLoading, props, queryParams]
   );
 
   return <DashboardPage {...dashboardPageProps} />;

public/app/fn-app/types.ts

@@ -26,7 +26,6 @@ export interface FNDashboardProps {
   mode: GrafanaThemeType.Dark | GrafanaThemeType.Light;
   queryParams: ParsedQuery<string>;
   fnError?: ReactNode;
-  fnLoader?: ReactNode;
   pageTitle?: string;
   controlsContainer: string;
   isLoading: (isLoading: boolean) => void;

yarn.lock

@@ -20226,6 +20226,7 @@ __metadata:
     lint-staged: 13.1.2
     lodash: 4.17.21
     logfmt: ^1.3.2
+    lottie-react: ^2.4.0
     lru-cache: 7.17.0
     lru-memoize: ^1.1.0
     memoize-one: 6.0.0
@@ -24825,6 +24826,25 @@ __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
+
 "loud-rejection@npm:^1.0.0":
   version: 1.6.0
   resolution: "loud-rejection@npm:1.6.0"