Implement hideLoading + refactor Loading component

src/components/Loading/Loading.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import styled, { withProps } from '../../styled-components';
+
+import { Spinner } from './Spinner.svg';
+
+const LoadingMessage = withProps<{ color: string }>(styled.div)`
+  font-family: helvetica, sans;
+  width: 100%;
+  text-align: center;
+  font-size: 25px;
+  margin: 30px 0 20px 0;
+  color: ${props => props.color};
+`;
+
+export interface LoadingProps {
+  color: string;
+}
+
+export class Loading extends React.PureComponent<LoadingProps> {
+  render() {
+    console.log('loading');
+    return (
+      <div style={{ textAlign: 'center' }}>
+        <LoadingMessage color={this.props.color}>Loading ...</LoadingMessage>
+        <Spinner color={this.props.color} />
+      </div>
+    );
+  }
+}

src/components/Loading/Spinner.svg.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styled, { keyframes } from '../../styled-components';
 
-const _Spinner = (props: { className?: string }) => (
+const _Spinner = (props: { className?: string; color: string }) => (
   <svg className={props.className} version="1.1" width="512" height="512" viewBox="0 0 512 512">
     <path d="M275.682 147.999c0 10.864-8.837 19.661-19.682 19.661v0c-10.875 0-19.681-8.796-19.681-19.661v-96.635c0-10.885 8.806-19.661 19.681-19.661v0c10.844 0 19.682 8.776 19.682 19.661v96.635z" />
     <path d="M275.682 460.615c0 10.865-8.837 19.682-19.682 19.682v0c-10.875 0-19.681-8.817-19.681-19.682v-96.604c0-10.885 8.806-19.681 19.681-19.681v0c10.844 0 19.682 8.796 19.682 19.682v96.604z" />
@@ -31,6 +31,6 @@ export const Spinner = styled(_Spinner)`
   margin-left: -25px;
 
   path {
-    fill: black;
+    fill: ${props => props.color};
   }
 `;

src/components/LoadingWrap/LoadingWrap.tsx

@@ -1,28 +0,0 @@
-import * as React from 'react';
-import { Children } from 'react';
-import styled from '../../styled-components';
-
-import { Spinner } from './Spinner.svg';
-
-const LoadingMessage = styled.div`
-  font-family: black;
-  width: 100%;
-  text-align: center;
-  font-size: 25px;
-  margin: 30px 0 20px 0;
-  color: black;
-`;
-
-export class LoadingWrap extends React.Component<{ loading: boolean }> {
-  render() {
-    if (!this.props.loading) {
-      return Children.only(this.props.children);
-    }
-    return (
-      <div style={{ textAlign: 'center' }}>
-        <LoadingMessage>Loading ...</LoadingMessage>
-        <Spinner />
-      </div>
-    );
-  }
-}

src/components/RedocStandalone.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 
-import { LoadingWrap } from './LoadingWrap/LoadingWrap';
+import { Loading } from './Loading/Loading';
 import { StoreProvider } from './StoreProvider';
 import { ErrorBoundary } from './ErrorBoundary';
 import { Redoc } from './Redoc/Redoc';
-import { RedocRawOptions } from '../services/RedocNormalizedOptions';
+import { RedocNormalizedOptions, RedocRawOptions } from '../services/RedocNormalizedOptions';
 
 export interface RedocStandaloneProps {
   spec?: object;
@@ -34,16 +34,21 @@ export class RedocStandalone extends React.Component<RedocStandaloneProps> {
   };
 
   render() {
-    const { spec, specUrl, options } = this.props;
+    const { spec, specUrl, options = {} } = this.props;
+    const hideLoading = options.hideLoading !== undefined;
+
+    const normalizedOpts = new RedocNormalizedOptions(options);
 
     return (
       <ErrorBoundary>
         <StoreProvider spec={spec} specUrl={specUrl} options={options}>
-          {({ loading, store }) => (
+          {({ loading, store }) =>
-            <LoadingWrap loading={loading}>
+            !loading ? (
-              <Redoc store={store} />
+              <Redoc store={store!} />
-            </LoadingWrap>
+            ) : hideLoading ? null : (
-          )}
+              <Loading color={normalizedOpts.theme.colors.main} />
+            )
+          }
         </StoreProvider>
       </ErrorBoundary>
     );

src/components/StoreProvider.ts

@@ -4,26 +4,26 @@ import { AppStore } from '../services/';
 import { loadAndBundleSpec } from '../utils';
 import { RedocRawOptions } from '../services/RedocNormalizedOptions';
 
-interface SpecProps {
+interface StoreProviderProps {
   specUrl?: string;
   spec?: object;
   store?: AppStore;
 
   options?: RedocRawOptions;
 
-  children?: any;
+  children: (props: { loading: boolean; store?: AppStore }) => any;
 }
 
-interface SpecState {
+interface StoreProviderState {
   error?: Error;
   loading: boolean;
   store?: AppStore;
 }
 
-export class StoreProvider extends Component<SpecProps, SpecState> {
+export class StoreProvider extends Component<StoreProviderProps, StoreProviderState> {
   store: AppStore;
 
-  constructor(props: SpecProps) {
+  constructor(props: StoreProviderProps) {
     super(props);
 
     this.state = {

src/services/RedocNormalizedOptions.ts

@@ -11,6 +11,7 @@ export interface RedocRawOptions {
   noAutoAuth?: boolean | string;
   nativeScrollbars?: boolean | string;
   pathInMiddlePanel?: boolean | string;
+  hideLoading?: boolean | string;
 }
 
 function argValueToBoolean(val?: string | boolean): boolean {