add loading page

zlargon · zlargon · commit 19e74d93ffa0 · 2016-04-10T22:56:42.000+08:00
diff --git a/index.html b/index.html
@@ -9,9 +9,6 @@
 
   <!-- Bootstrap -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
-  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
-  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
-
   <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
   <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
   <!--[if lt IE 9]>
@@ -29,7 +26,12 @@
 
 </head>
 <body>
-  <div class="container">
+  <div id="loading" class="container text-center">
+    <br>
+    <p class="lead">Loading...</p>
+  </div>
+
+  <div id="main" class="container hide">
     <h2>Gist HTML Preview</h2>
     <p class="lead">If `File Name` is blank, it would preview index.html or the first file as default.</p>
     <div class="form-inline" role="form">
@@ -45,12 +47,12 @@ <h2>Gist HTML Preview</h2>
     </div>
     <br/>
     <div id="alert-box"></div>
+    <a href="https://github.com/gistpreview/gistpreview.github.io"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
   </div>
 
-  <a href="https://github.com/gistpreview/gistpreview.github.io"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
-
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
   <script src="https://cdn.rawgit.com/github/fetch/master/fetch.js"></script>
   <script src="./main.js"></script>
 </body>
 </html>
-
diff --git a/main.js b/main.js
@@ -1,4 +1,9 @@
 (function () {
+  function showMainPage () {
+    document.getElementById('main').className = 'container';  // remove class 'hide'
+    document.getElementById('loading').className += ' hide';  // add class 'hide'
+  }
+
   function showError (message) {
     document.getElementById('alert-box').innerHTML
       += '<div class="alert alert-danger">'
@@ -25,6 +30,7 @@
   // 1. check query string
   var query = location.search.substring(1);
   if (query.length === 0) {
+    showMainPage();
     return;
   }
 
@@ -67,6 +73,7 @@
     document.write(content);
   })
   .catch(function (err) {
+    showMainPage();
     showError(err.message);
   });
 })();
