feat(docz-theme-default): add Loading component for DocPreview

packages/docz-theme-default/librc.js

@@ -2,4 +2,9 @@ const svg = require('rollup-plugin-svg')
 
 module.exports = {
   plugins: [svg()],
+  commonjs: {
+    namedExports: {
+      '../../node_modules/react-spinners/index.js': ['HashLoader'],
+    },
+  },
 }

packages/docz-theme-default/src/components/ui/Loading.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react'
+import { ThemeConfig } from 'docz'
+import { HashLoader } from 'react-spinners'
+import styled from 'react-emotion'
+
+const Wrapper = styled('div')`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+`
+
+export const Loading = () => (
+  <ThemeConfig>
+    {config => (
+      <Wrapper>
+        <HashLoader color={config.colors.primary} />
+      </Wrapper>
+    )}
+  </ThemeConfig>
+)

packages/docz-theme-default/src/components/ui/index.tsx

@@ -5,6 +5,7 @@ export { H4 } from './H4'
 export { H5 } from './H5'
 export { H6 } from './H6'
 export { List } from './List'
+export { Loading } from './Loading'
 export { Page } from './Page'
 export { Pre } from './Pre'
 export { Render } from './Render'

packages/docz-theme-default/src/index.tsx

@@ -23,6 +23,7 @@ const Theme = () => (
               h5: components.H5,
               h6: components.H6,
               ul: components.List,
+              loading: components.Loading,
               table: components.Table,
               pre: components.Pre,
               tooltip: components.Tooltip,

packages/docz-theme-default/src/types.d.ts

@@ -2,6 +2,7 @@ declare module 'react-feather'
 declare module 'react-powerplug'
 declare module 'react-lightweight-tooltip'
 declare module 'react-feather/dist/icons/chevron-down'
+declare module 'react-spinners'
 
 declare module '*.svg' {
   const content: any