add loading screen

markedjs · Feb 14, 2019 · 40d65e5 · 40d65e5
1 parent 5e2d773
commit 40d65e5
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 40 deletions.
diff --git a/docs/demo/demo.css b/docs/demo/demo.css
@@ -62,6 +62,10 @@ header h1 {
 	flex-grow: 1;
 }
 
+#main {
+	display: none;
+}
+
 .error {
 	border-color: red;
 	background-color: #FEE

diff --git a/docs/demo/demo.js b/docs/demo/demo.js
@@ -11,6 +11,8 @@ onunhandledrejection = function (e) {
   throw e.reason;
 };
 
+var $loadingElem = document.querySelector('#loading');
+var $mainElem = document.querySelector('#main');
 var $markdownElem = document.querySelector('#markdown');
 var $markedVerElem = document.querySelector('#markedVersion');
 var $commitVerElem = document.querySelector('#commitVersion');
@@ -73,6 +75,8 @@ Promise.all([
   handleOutputChange();
   checkForChanges();
   setScrollPercent(0);
+  $loadingElem.style.display = 'none';
+  $mainElem.style.display = 'block';
 });
 
 function setInitialText() {

diff --git a/docs/demo/index.html b/docs/demo/index.html
@@ -18,52 +18,55 @@
       <h1>Marked Demo</h1>
     </header>
 
-    <div class="containers">
-      <div class="container">
-        <div class="label">
-          <span>Input</span> ·
-          <a id="permalink">Permalink</a> ·
-          <span>Version: </span>
-          <select id="markedVersion">
-            <option value="pr">Add PR:</option>
-            <option value="commit">Add Commit:</option>
-            <option value="master" selected>master</option>
-          </select>
-          <input type="text" id="commitVersion" title="Press ENTER to add commit" />·
-          <button id="clear">Clear</button>
-          <select id="inputType">
-            <option value="markdown">Markdown</option>
-            <option value="options">Options</option>
-          </select>
+    <div id="loading">Loading...</div>
+    <div id="main">
+      <div class="containers">
+        <div class="container">
+          <div class="label">
+            <span>Input</span> ·
+            <a id="permalink">Permalink</a> ·
+            <span>Version: </span>
+            <select id="markedVersion">
+              <option value="pr">Add PR:</option>
+              <option value="commit">Add Commit:</option>
+              <option value="master" selected>master</option>
+            </select>
+            <input type="text" id="commitVersion" title="Press ENTER to add commit" />·
+            <button id="clear">Clear</button>
+            <select id="inputType">
+              <option value="markdown">Markdown</option>
+              <option value="options">Options</option>
+            </select>
+          </div>
+          <textarea id="markdown" class="inputPane"></textarea>
+          <textarea id="options" class="inputPane" placeholder="Options (as JSON)"></textarea>
         </div>
-        <textarea id="markdown" class="inputPane"></textarea>
-        <textarea id="options" class="inputPane" placeholder="Options (as JSON)"></textarea>
-      </div>
 
-      <div class="container">
-        <div class="label">
-          <select id="outputType">
-            <option value="preview">Preview</option>
-            <option value="html">HTML Source</option>
-            <option value="lexer">Lexer Data</option>
-            <option value="quickref">Quick Reference</option>
-          </select> ·
-          Response Time:
-          <span id="responseTime"></span>
-        </div>
+        <div class="container">
+          <div class="label">
+            <select id="outputType">
+              <option value="preview">Preview</option>
+              <option value="html">HTML Source</option>
+              <option value="lexer">Lexer Data</option>
+              <option value="quickref">Quick Reference</option>
+            </select> ·
+            Response Time:
+            <span id="responseTime"></span>
+          </div>
 
-        <div id="preview" class="pane">
-          <noscript>
-            <h2>You'll need to enable Javascript to use this tool.</h2>
-          </noscript>
-          <iframe src="./preview.html" frameborder="0" sandbox="allow-same-origin"></iframe>
-        </div>
+          <div id="preview" class="pane">
+            <noscript>
+              <h2>You'll need to enable Javascript to use this tool.</h2>
+            </noscript>
+            <iframe src="./preview.html" frameborder="0" sandbox="allow-same-origin"></iframe>
+          </div>
 
-        <textarea id="html" class="pane" readonly="readonly"></textarea>
+          <textarea id="html" class="pane" readonly="readonly"></textarea>
 
-        <textarea id="lexer" class="pane" readonly="readonly"></textarea>
+          <textarea id="lexer" class="pane" readonly="readonly"></textarea>
 
-        <textarea id="quickref" class="pane" readonly="readonly"></textarea>
+          <textarea id="quickref" class="pane" readonly="readonly"></textarea>
+        </div>
       </div>
     </div>
     <script id="markedCdn"></script>