Grafana firefox (#77)

* vscode fix

* fixed firefox bugs

---------

Co-authored-by: Gurinder Singh <[email protected]>

Author: 2 people

public/app/features/dashboard/dashgrid/LazyLoader.tsx

@@ -1,5 +1,4 @@
-import { useId, useRef, useState } from 'react';
-import * as React from 'react';
+import React, { useId, useRef, useState } from 'react';
 import { useEffectOnce } from 'react-use';
 
 export interface Props {

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

@@ -49,12 +49,12 @@ export const FnAppProvider: FC<FnAppProviderProps> = (props) => {
       <BrowserRouter>
         <ErrorBoundaryAlert style="page">
           <GrafanaContext.Provider value={app.context}>
-            <ThemeProvider value={config.theme2} children={
+            <ThemeProvider value={config.theme2}>
               <>
                 <GlobalStyles />
-                {children || null}
-              </>}
-            />
+                {children}
+              </>
+            </ThemeProvider>
           </GrafanaContext.Provider>
         </ErrorBoundaryAlert>
       </BrowserRouter>

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

@@ -1,6 +1,5 @@
 import { pick } from 'lodash';
-import React, { FC, Suspense, useMemo } from 'react';
-import { lazily } from 'react-lazily';
+import React, { FC, useMemo } from 'react';
 import { connect, MapStateToProps } from 'react-redux';
 
 import {
@@ -11,25 +10,23 @@ import {
   FnPropsMappedFromState,
 } from 'app/core/reducers/fn-slice';
 
+import { AngularRoot } from '../../angular/AngularRoot';
+import { FnAppProvider } from '../fn-app-provider';
 import { FNDashboardProps } from '../types';
 import { RenderPortal } from '../utils';
 
-const { RenderFNDashboard } = lazily(() => import('./render-fn-dashboard'));
-const { FnAppProvider } = lazily(() => import('../fn-app-provider'));
-const { AngularRoot } = lazily(() => import('../../angular/AngularRoot'));
+import { RenderFNDashboard } from './render-fn-dashboard';
 
 type FNDashboardComponentProps = Omit<FNDashboardProps, FnPropMappedFromState>;
 
 export const FNDashboard: FC<FNDashboardComponentProps> = (props) => {
   return (
-    <Suspense fallback={<>{props.fnLoader}</>}>
-      <FnAppProvider fnError={props.fnError}>
-        <div className="page-dashboard">
-          <AngularRoot />
-          <DashboardPortal {...props} />
-        </div>
-      </FnAppProvider>
-    </Suspense>
+    <FnAppProvider fnError={props.fnError}>
+      <div className="page-dashboard">
+        <AngularRoot />
+        <DashboardPortal {...props} />
+      </div>
+    </FnAppProvider>
   );
 };
 
@@ -42,7 +39,6 @@ function mapStateToProps(): MapStateToProps<
 }
 
 export const DashboardPortalComponent: FC<FNDashboardComponentProps & FnPropsMappedFromState> = (props) => {
-
   const content = useMemo(() => {
     if (!props.FNDashboard) {
       // TODO Use no data

public/app/fn-app/utils.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import ReactDOM from 'react-dom';
 
 export interface RenderPortalProps {
@@ -7,14 +7,12 @@ export interface RenderPortalProps {
 
 export const getPortalContainer = (ID: string): HTMLElement | null => document.getElementById(ID);
 
-export const RenderPortal: FC<RenderPortalProps> = ({ ID, children }) => {
-  const portalDiv = getPortalContainer(ID)
-  
-  if(!portalDiv){
+export const RenderPortal: FC<PropsWithChildren<RenderPortalProps>> = ({ ID, children }) => {
+  const portalDiv = getPortalContainer(ID);
+
+  if (!portalDiv) {
     return null;
   }
 
   return ReactDOM.createPortal(children, portalDiv);
 };
-
-