From 589427078385332f66d77605fac80ced8d0e5a78 Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Sat, 10 Apr 2021 13:47:34 +0200
Subject: [PATCH] config-schema: separate loading and missing schema

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
---
 .../ConfigSchemaPage/ConfigSchemaPage.tsx     | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/plugins/config-schema/src/components/ConfigSchemaPage/ConfigSchemaPage.tsx b/plugins/config-schema/src/components/ConfigSchemaPage/ConfigSchemaPage.tsx
index 4bc7cfd98c..a2082ef972 100644
--- a/plugins/config-schema/src/components/ConfigSchemaPage/ConfigSchemaPage.tsx
+++ b/plugins/config-schema/src/components/ConfigSchemaPage/ConfigSchemaPage.tsx
@@ -14,23 +14,35 @@
  * limitations under the License.
  */
 import React, { useMemo } from 'react';
-import { Header, Page, Content, useApi } from '@backstage/core';
+import { Header, Page, Content, useApi, Progress } from '@backstage/core';
 import { useObservable } from 'react-use';
 import { configSchemaApiRef } from '../../api';
 import { SchemaViewer } from '../SchemaViewer';
+import { Typography } from '@material-ui/core';
 
 export const ConfigSchemaPage = () => {
   const configSchemaApi = useApi(configSchemaApiRef);
-  const schema = useObservable(
+  const schemaResult = useObservable(
     useMemo(() => configSchemaApi.schema$(), [configSchemaApi]),
-  )?.schema;
+  );
+
+  let content;
+  if (schemaResult) {
+    if (schemaResult.schema) {
+      content = <SchemaViewer schema={schemaResult.schema} />;
+    } else {
+      content = (
+        <Typography variant="h4">No configuration schema available</Typography>
+      );
+    }
+  } else {
+    content = <Progress />;
+  }
 
   return (
     <Page themeId="tool">
       <Header title="Configuration Reference" />
-      <Content stretch>
-        {schema ? <SchemaViewer schema={schema} /> : 'No schema available'}
-      </Content>
+      <Content stretch>{content}</Content>
     </Page>
   );
 };