Loading fixes

4 files changed, 67 insertions, 22 deletions

diff --git a/vnext/src/components/Header.js b/vnext/src/components/Header.js
index 8bf4bc8d..91fa02fd 100644
--- a/vnext/src/components/Header.js
+++ b/vnext/src/components/Header.js
@@ -66,11 +66,11 @@ export default class Header extends React.Component {
         this.wScrollBefore = this.wScrollCurrent;
     }
     render() {
-        return (<header id="header" ref={this.header} style={this.props.style}>{this.props.children}</header>);
+        return (<header id="header" ref={this.header} style={this.props.style || {}}>{this.props.children}</header>);
     }
 }
 
 Header.propTypes = {
     children: PropTypes.node,
-    style: PropTypes.style
+    style: PropTypes.object
 };
diff --git a/vnext/src/index.js b/vnext/src/index.js
index 74a332fd..c2d2b6b7 100644
--- a/vnext/src/index.js
+++ b/vnext/src/index.js
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 
 function LoadingView(props) {
   return (
-    <div id="body">
+    <>
       <div id="header">
         <div id="header_wrapper">
           <div id="logo">
@@ -14,11 +14,17 @@ function LoadingView(props) {
               <input name="search" className="text" placeholder="Search..." />
             </form>
           </div>
-          <nav id="global"></nav>
+          <nav id="global">
+            <a href="/">Loading...</a>
+          </nav>
         </div>
       </div>
-      <div id="wrapper"></div>
-    </div>
+      <div id="wrapper">
+        <div id="content">
+          <div className="lds-ripple"><div></div><div></div></div>
+        </div>
+      </div>
+    </>
   );
 }
 
diff --git a/vnext/src/style/main.css b/vnext/src/style/main.css
index 726c2cba..964890c2 100644
--- a/vnext/src/style/main.css
+++ b/vnext/src/style/main.css
@@ -58,12 +58,14 @@ img, hr {
     transition: margin-left 0.4s;
     overflow-x: hidden;
 }
+
 #header_wrapper, .footer_container {
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
 }
+
 #sidebar {
     color: #222;
     transition: width 0.4s;
@@ -90,7 +92,7 @@ img, hr {
     width: 100%;
     margin-top: 12px;
     overflow-x: hidden;
-    transition: margin-left 0.4s;   
+    transition: margin-left 0.4s;
 }
 
 #footer {
@@ -144,8 +146,7 @@ img, hr {
     display: flex;
 }
 
-#global a,
-#ctitle a {
+#global a, #ctitle a {
     display: flex;
     align-items: center;
     border-bottom: 2px solid transparent;
@@ -156,7 +157,7 @@ img, hr {
     padding: 14px 16px;
 }
 
-#sidebar > a {
+#sidebar>a {
     color: #88958d;
     border-right: 2px solid transparent;
     display: flex;
@@ -164,7 +165,8 @@ img, hr {
     align-items: center;
     vertical-align: middle;
 }
-#sidebar > a:hover {
+
+#sidebar>a:hover {
     background-color: #f8f8f8;
     border-right: 2px solid #ff339a;
     cursor: pointer;
@@ -174,10 +176,7 @@ img, hr {
     padding: 2px 20px;
 }
 
-#global a:hover,
-#ctitle a:hover,
-.l a:hover
-.msg-button:hover {
+#global a:hover, #ctitle a:hover, .l a:hover .msg-button:hover {
     background-color: #f8f8f8;
     border-bottom: 2px solid #ff339a;
     cursor: pointer;
@@ -196,6 +195,41 @@ img, hr {
     border-radius: 0;
 }
 
+.lds-ripple {
+    display: inline-block;
+    position: relative;
+    width: 64px;
+    height: 64px;
+}
+
+.lds-ripple div {
+    position: absolute;
+    border: 4px solid #ff339a;
+    opacity: 1;
+    border-radius: 50%;
+    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+}
+
+.lds-ripple div:nth-child(2) {
+    animation-delay: -0.5s;
+}
+
+@keyframes lds-ripple {
+    0% {
+        top: 28px;
+        left: 28px;
+        width: 0;
+        height: 0;
+        opacity: 1;
+    }
+    100% {
+        top: -1px;
+        left: -1px;
+        width: 58px;
+        height: 58px;
+        opacity: 0;
+    }
+}
 
 @media (--viewport-desktop) {
     #app {
diff --git a/vnext/src/views/index.html b/vnext/src/views/index.html
index 3b8480d7..792424e2 100644
--- a/vnext/src/views/index.html
+++ b/vnext/src/views/index.html
@@ -34,15 +34,20 @@
         <div id="header">
             <div id="header_wrapper">
                 <div id="logo"><a href="/">Juick</a></div>
+                <nav id="global">
+                    <a href="/">Loading..</a>
+                </nav>
             </div>
         </div>
-        <div id="content">
-            <noscript>
-                <article>
-                    Javascript is required to use Juick from browser.<br /> Alternatively we have <a href="mailto:juick@juick.com">maillist-like</a>
-                    and <a href="xmpp:juick@juick.com">chat</a> interfaces.
-                </article>
-            </noscript>
+        <div id="wrapper">
+            <div id="content">
+                <noscript>
+                    <article>
+                        Javascript is required to use Juick from browser.<br /> Alternatively we have <a href="mailto:juick@juick.com">maillist-like</a>
+                        and <a href="xmpp:juick@juick.com">chat</a> interfaces.
+                    </article>
+                </noscript>
+            </div>
         </div>
         <div id="footer">
             <div id="footer-right"> &middot;