Feature: Encapsulated dynamic imports with error boundary and suspense (#19128)

* Feature: Encapsulated dynamic imports with error boundary and suspense

* Refactor: Changes after PR review

* Align PageLoader and LoadingPlaceholder

* Updated loading failed UI abit

* Change Failed to Unable

public/app/core/components/PageLoader/PageLoader.tsx

 import React, { FC } from 'react';
+import { LoadingPlaceholder } from '@grafana/ui';
 
 interface Props {
   pageName?: string;
@@ -8,8 +9,7 @@ const PageLoader: FC<Props> = ({ pageName = '' }) => {
   const loadingText = `Loading ${pageName}...`;
   return (
     <div className="page-loader-wrapper">
-      <i className="page-loader-wrapper__spinner fa fa-spinner fa-spin" />
-      <div className="page-loader-wrapper__text">{loadingText}</div>
+      <LoadingPlaceholder text={loadingText} />
     </div>
   );
 };

public/app/core/components/SafeDynamicImport.tsx

+import React, { lazy, Suspense, FunctionComponent } from 'react';
+import { cx, css } from 'emotion';
+import { LoadingPlaceholder, ErrorBoundary, Button } from '@grafana/ui';
+
+export const LoadingChunkPlaceHolder: FunctionComponent = () => (
+  <div className={cx('preloader')}>
+    <LoadingPlaceholder text={'Loading...'} />
+  </div>
+);
+
+function getAlertPageStyle() {
+  return css`
+    width: 508px;
+    margin: 128px auto;
+  `;
+}
+
+export const SafeDynamicImport = (importStatement: Promise<any>) => ({ ...props }) => {
+  const LazyComponent = lazy(() => importStatement);
+  return (
+    <ErrorBoundary>
+      {({ error, errorInfo }) => {
+        if (!errorInfo) {
+          return (
+            <Suspense fallback={<LoadingChunkPlaceHolder />}>
+              <LazyComponent {...props} />
+            </Suspense>
+          );
+        }
+
+        return (
+          <div className={getAlertPageStyle()}>
+            <h2>Unable to find application file</h2>
+            <br />
+            <h2 className="page-heading">Grafana has likely been updated. Please try reloading the page.</h2>
+            <br />
+            <div className="gf-form-group">
+              <Button size={'md'} variant={'secondary'} icon="fa fa-repeat" onClick={() => window.location.reload()}>
+                Reload
+              </Button>
+            </div>
+            <details style={{ whiteSpace: 'pre-wrap' }}>
+              {error && error.toString()}
+              <br />
+              {errorInfo.componentStack}
+            </details>
+          </div>
+        );
+      }}
+    </ErrorBoundary>
+  );
+};