packages/core-api: add Progress as a configurable app component

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>
       );

packages/core-api/src/app/types.ts

@@ -28,6 +28,7 @@ export type BootErrorPageProps = {
 export type AppComponents = {
   NotFoundErrorPage: ComponentType<{}>;
   BootErrorPage: ComponentType<BootErrorPageProps>;
+  Progress: ComponentType<{}>;
 };
 
 /**

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 ?? [