feat: add loading indicator when waiting on form data or schema to load

Composer/packages/extensions/adaptive-form/src/components/AdaptiveForm/index.tsx → Composer/packages/extensions/adaptive-form/src/components/AdaptiveForm.tsx

@@ -1,16 +1,27 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { css } from '@emotion/core';
 import React, { useMemo } from 'react';
 import { FormErrors, JSONSchema7, UIOptions, PluginConfig } from '@bfc/extension';
 import ErrorBoundary from 'react-error-boundary';
+import formatMessage from 'format-message';
 
-import PluginContext from '../../PluginContext';
-import { SchemaField } from '../SchemaField';
-import { mergePluginConfigs } from '../../utils/mergePluginConfigs';
+import PluginContext from '../PluginContext';
+import { mergePluginConfigs } from '../utils/mergePluginConfigs';
 
+import { SchemaField } from './SchemaField';
 import FormTitle from './FormTitle';
 import ErrorInfo from './ErrorInfo';
+import { LoadingTimeout } from './LoadingTimeout';
+
+const styles = {
+  errorLoading: css`
+    padding: 18px;
+  `,
+};
 
 export interface AdaptiveFormProps {
   errors?: string | FormErrors | string[] | FormErrors[];
@@ -29,12 +40,16 @@ export const AdaptiveForm: React.FC<AdaptiveFormProps> = function AdaptiveForm(p
     return pluginConfig || mergePluginConfigs();
   }, [pluginConfig]);
 
-  if (!formData) {
-    return <>No Data</>;
-  }
-
-  if (!schema) {
-    return null;
+  if (!formData || !schema) {
+    return (
+      <LoadingTimeout timeout={2000}>
+        <div css={styles.errorLoading}>
+          {formatMessage('{type} could not be loaded', {
+            type: formData ? formatMessage('Schema') : formatMessage('Dialog data'),
+          })}
+        </div>
+      </LoadingTimeout>
+    );
   }
 
   return (

Composer/packages/extensions/adaptive-form/src/components/AdaptiveForm/FormTitle.tsx → Composer/packages/extensions/adaptive-form/src/components/FormTitle.tsx

@@ -8,11 +8,34 @@ import { FontWeights } from '@uifabric/styling';
 import { FontSizes } from '@uifabric/fluent-theme';
 import formatMessage from 'format-message';
 import { UIOptions, JSONSchema7 } from '@bfc/extension';
-
-import { EditableField } from '../fields/EditableField';
-import { Link } from '../Link';
-
-import { title as styles } from './styles';
+import { css } from '@emotion/core';
+
+import { EditableField } from './fields/EditableField';
+import { Link } from './Link';
+
+export const styles = {
+  container: css`
+    border-bottom: 1px solid #c8c6c4;
+    padding: 0 18px;
+    margin-bottom: 0px;
+  `,
+
+  subtitle: css`
+    height: 15px;
+    line-height: 15px;
+    font-size: 12px;
+    font-weight: 600;
+    color: #4f4f4f;
+    margin: -7px 0 7px;
+  `,
+
+  description: css`
+    margin-top: 0;
+    margin-bottom: 10px;
+    white-space: pre-line;
+    font-size: ${FontSizes.size12};
+  `,
+};
 
 interface FormTitleProps {
   description?: string;

Composer/packages/extensions/adaptive-form/src/components/LoadingTimeout.tsx

@@ -0,0 +1,47 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import React, { useState, useEffect } from 'react';
+import { css } from '@emotion/core';
+import formatMessage from 'format-message';
+import { Spinner } from 'office-ui-fabric-react/lib/Spinner';
+
+const container = css`
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+type LoadingTimeoutProps = {
+  timeout?: number;
+  children: React.ReactChild;
+};
+
+const LoadingTimeout: React.FC<LoadingTimeoutProps> = (props) => {
+  const { children, timeout = 1000 } = props;
+  const [showFallback, setShowFallback] = useState(false);
+
+  useEffect(() => {
+    const tId = setTimeout(() => {
+      setShowFallback(true);
+    }, timeout);
+
+    return () => {
+      clearTimeout(tId);
+    };
+  }, []);
+
+  return showFallback ? (
+    <div>{children}</div>
+  ) : (
+    <div css={container}>
+      <Spinner label={formatMessage('Loading')} />
+    </div>
+  );
+};
+
+export { LoadingTimeout };

Composer/packages/extensions/adaptive-form/src/components/__tests__/LoadingTimeout.test.tsx

@@ -0,0 +1,42 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import React from 'react';
+import { render, act } from '@bfc/test-utils';
+import assign from 'lodash/assign';
+
+import { LoadingTimeout } from '../LoadingTimeout';
+
+const defaultProps = {
+  timeout: 500,
+  children: <div />,
+};
+
+function renderSubject(overrides = {}) {
+  const { children, ...rest } = assign({}, defaultProps, overrides);
+  return render(<LoadingTimeout {...rest}>{children}</LoadingTimeout>);
+}
+
+describe('<LoadingTimeout />', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  it('renders a spinner with "Loading"', () => {
+    const { container } = renderSubject();
+    expect(container).toHaveTextContent('Loading');
+  });
+
+  it('displays children after timeout', async () => {
+    const fallback = <div>Fallback content</div>;
+    const { container } = renderSubject({ children: fallback });
+    expect(container).toHaveTextContent('Loading');
+
+    await act(async () => {
+      jest.advanceTimersByTime(499);
+      expect(container).toHaveTextContent('Loading');
+      jest.advanceTimersByTime(2);
+      expect(container).toHaveTextContent('Fallback content');
+    });
+  });
+});