Modify component loading style.

Author: jaywcjlove

templates/default/home/README.md

@@ -10,6 +10,7 @@ body, html { background: #fff; }
 .jumbotron {
   position: absolute;
   background-color: #383838;
+  top: 56px;
   left: 0;
   right: 0;
   padding-top: 80px;

theme/default/component/Header/index.less

@@ -22,6 +22,7 @@
   position: relative;
   position: fixed;
   width: 100%;
+  top: 0;
   z-index: 9;
   .wapper {
     max-width: 1200px;

theme/default/component/Loading/index.less

@@ -1,4 +1,5 @@
 .loading {
   text-align: center;
   min-height: 450px;
+  padding: 30px 0;
 }

theme/default/layout/IndexLayout.less

@@ -2,7 +2,10 @@
   background-color: transparent;
   box-shadow: 0 0 0 #fff;
   border-bottom: 0;
+  background-color: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 }
 .wapper {
   min-height: 500px;
+  padding: 57px 0 0 0;
 }

theme/default/lib/markdown/index.js

@@ -6,6 +6,7 @@ import hljs from 'highlight.js';
 import styles from './style/index.less';
 import InlineCode from './InlineCode';
 import Link from './Link';
+import Loading from '../../component/Loading/';
 
 hljs.configure({
   tabReplace: '  ', // 2 spaces
@@ -23,7 +24,7 @@ export default class Markdown extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      markdownStr: 'loading ... ',
+      markdownStr: '',
     };
   }
   componentWillMount() {
@@ -53,36 +54,41 @@ export default class Markdown extends React.Component {
   }
   render() {
     const { mdconf: { title, layout } } = this.props;
+    const { markdownStr } = this.state;
     return (
       <div className={styles.markdownWapper}>
         {title && layout !== 'IndexLayout' && <h1 id={title} className={styles.pageTitle}>{title}</h1>}
-        <ReactMarkdown
-          className={classNames('markdown', styles.markdown)}
-          source={this.state.markdownStr}
-          escapeHtml={false}
-          renderers={{
-            code: InlineCode,
-            link: Link,
-            linkReference: Link,
-          }}
-          allowNode={(node, index, parent) => {
-            if (node.type === 'html') {
-              // if (/<!--([^]+?)-->/.test(node.value)) return false;
-              // const scriptValue = node.value.match(/<script.*?>(.*?)<\/script>/ig);
-              // node.value.replace(/<script.*?>(.*?)<\/script>/, (te) => {
-              //   console.log('te:', te);
-              // });
-            }
-            // 判断 上一个节点是否为 <!--DemoStart -->
-            if (node.type === 'code' && parent.children && parent.children.length > 0 && parent.children[index - 1]) {
-              const parentNode = parent.children[index - 1];
-              if (parentNode.type === 'html' && /<!--\s?DemoStart\s?-->/.test(parentNode.value)) {
-                node.value = `__dome__${node.value}`;
+        {markdownStr ? (
+          <ReactMarkdown
+            className={classNames('markdown', styles.markdown)}
+            source={markdownStr}
+            escapeHtml={false}
+            renderers={{
+              code: InlineCode,
+              link: Link,
+              linkReference: Link,
+            }}
+            allowNode={(node, index, parent) => {
+              if (node.type === 'html') {
+                // if (/<!--([^]+?)-->/.test(node.value)) return false;
+                // const scriptValue = node.value.match(/<script.*?>(.*?)<\/script>/ig);
+                // node.value.replace(/<script.*?>(.*?)<\/script>/, (te) => {
+                //   console.log('te:', te);
+                // });
               }
-            }
-            return node;
-          }}
-        />
+              // 判断 上一个节点是否为 <!--DemoStart -->
+              if (node.type === 'code' && parent.children && parent.children.length > 0 && parent.children[index - 1]) {
+                const parentNode = parent.children[index - 1];
+                if (parentNode.type === 'html' && /<!--\s?DemoStart\s?-->/.test(parentNode.value)) {
+                  node.value = `__dome__${node.value}`;
+                }
+              }
+              return node;
+            }}
+          />
+        ) : (
+          <Loading />
+        )}
       </div>
     );
   }