From d120e5f8cb9116aa89eb1c479939ed410ce29c29 Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Thu, 28 May 2020 19:55:02 +0200
Subject: [PATCH] packages/core-api: add Progress as a configurable app
 component

---
 packages/core-api/src/app/App.tsx            | 15 ++++++++-------
 packages/core-api/src/app/types.ts           |  1 +
 packages/core/src/api-wrappers/createApp.tsx |  2 ++
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/core-api/src/app/App.tsx b/packages/core-api/src/app/App.tsx
index c3ea77d87f..49d2291acd 100644
--- a/packages/core-api/src/app/App.tsx
+++ b/packages/core-api/src/app/App.tsx
@@ -149,14 +149,15 @@ export class PrivateAppImpl implements BackstageApp {
   getProvider(): ComponentType<{}> {
     const Provider: FC<{}> = ({ children }) => {
       const config = useAsync(this.configLoader);
-      if (config.loading) {
-        return null;
-      }
 
-      let errorPage = undefined;
-      if (config.error) {
+      let childNode = children;
+
+      if (config.loading) {
+        const { Progress } = this.components;
+        childNode = <Progress />;
+      } else if (config.error) {
         const { BootErrorPage } = this.components;
-        errorPage = <BootErrorPage step="load-config" error={config.error} />;
+        childNode = <BootErrorPage step="load-config" error={config.error} />;
       }
 
       const appApis = ApiRegistry.from([
@@ -168,7 +169,7 @@ export class PrivateAppImpl implements BackstageApp {
       return (
         <ApiProvider apis={apis}>
           <AppContextProvider app={this}>
-            <AppThemeProvider>{errorPage ?? children}</AppThemeProvider>
+            <AppThemeProvider>{childNode}</AppThemeProvider>
           </AppContextProvider>
         </ApiProvider>
       );
diff --git a/packages/core-api/src/app/types.ts b/packages/core-api/src/app/types.ts
index e43a625569..defc155a82 100644
--- a/packages/core-api/src/app/types.ts
+++ b/packages/core-api/src/app/types.ts
@@ -28,6 +28,7 @@ export type BootErrorPageProps = {
 export type AppComponents = {
   NotFoundErrorPage: ComponentType<{}>;
   BootErrorPage: ComponentType<BootErrorPageProps>;
+  Progress: ComponentType<{}>;
 };
 
 /**
diff --git a/packages/core/src/api-wrappers/createApp.tsx b/packages/core/src/api-wrappers/createApp.tsx
index cc083b0e24..7c605c4e18 100644
--- a/packages/core/src/api-wrappers/createApp.tsx
+++ b/packages/core/src/api-wrappers/createApp.tsx
@@ -24,6 +24,7 @@ import privateExports, {
 import { BrowserRouter as Router } from 'react-router-dom';
 
 import { ErrorPage } from '../layout/ErrorPage';
+import Progress from '../components/Progress';
 import { lightTheme, darkTheme } from '@backstage/theme';
 
 const { PrivateAppImpl } = privateExports;
@@ -59,6 +60,7 @@ export function createApp(options?: AppOptions) {
   const components = {
     NotFoundErrorPage: DefaultNotFoundPage,
     BootErrorPage: DefaultBootErrorPage,
+    Progress: Progress,
     ...options?.components,
   };
   const themes = options?.themes ?? [