From 5c12c2f261fc8a7a587affbc169fdbe64dfc345f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kasper=20Rynning-T=C3=B8nnesen?= <kasper@kasperrt.no>
Date: Wed, 8 Aug 2018 16:20:23 +0200
Subject: [PATCH] Added a load-screen, will test for some time and see if it
 helps any

---
 server/public/assets/css/style.css           |  11 ++
 server/public/layouts/client/main.handlebars | 179 ++++++++++++++++++-
 2 files changed, 189 insertions(+), 1 deletion(-)

diff --git a/server/public/assets/css/style.css b/server/public/assets/css/style.css
index 1a2ae0d5..1a2e46c7 100755
--- a/server/public/assets/css/style.css
+++ b/server/public/assets/css/style.css
@@ -25,6 +25,17 @@ a {
     outline: 0 !important;
 }
 
+.initial-load {
+    display: none !important;
+}
+ body {
+    height: auto !important;
+    overflow: initial !important;
+}
+#main-container, footer {
+    display: initial !important;
+}
+
 .error-code-container {
     background: lightgrey;
     border: 1px solid darkgrey;
diff --git a/server/public/layouts/client/main.handlebars b/server/public/layouts/client/main.handlebars
index 54b100f0..2deff7d9 100644
--- a/server/public/layouts/client/main.handlebars
+++ b/server/public/layouts/client/main.handlebars
@@ -31,7 +31,7 @@
             <link rel="mask-icon" href="/assets/images/safari-pinned-tab.svg" color="#2d2d2d">
         {{/unless}}
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
-        <link rel="stylesheet" type="text/css" href="/assets/css/{{stylesheet}}">
+        <link rel="stylesheet" type="text/css" href="/assets/css/{{stylesheet}}" title="Default" media="none" onload="if(media!='all')media='all'">
         <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" media="none" onload="if(media!='all')media='all'">
         {{#unless embed}}
             <script async type="text/javascript">
@@ -49,6 +49,172 @@
                 }
             </script>
         {{/unless}}
+        <style>
+        @-webkit-keyframes uil-ring-anim {
+			0% {
+				-ms-transform: rotate(0deg);
+				-moz-transform: rotate(0deg);
+				-webkit-transform: rotate(0deg);
+				-o-transform: rotate(0deg);
+				transform: rotate(0deg);
+			}
+			100% {
+				-ms-transform: rotate(360deg);
+				-moz-transform: rotate(360deg);
+				-webkit-transform: rotate(360deg);
+				-o-transform: rotate(360deg);
+				transform: rotate(360deg);
+			}
+		}
+		@-webkit-keyframes uil-ring-anim {
+			0% {
+				-ms-transform: rotate(0deg);
+				-moz-transform: rotate(0deg);
+				-webkit-transform: rotate(0deg);
+				-o-transform: rotate(0deg);
+				transform: rotate(0deg);
+			}
+			100% {
+				-ms-transform: rotate(360deg);
+				-moz-transform: rotate(360deg);
+				-webkit-transform: rotate(360deg);
+				-o-transform: rotate(360deg);
+				transform: rotate(360deg);
+			}
+		}
+		@-moz-keyframes uil-ring-anim {
+			0% {
+				-ms-transform: rotate(0deg);
+				-moz-transform: rotate(0deg);
+				-webkit-transform: rotate(0deg);
+				-o-transform: rotate(0deg);
+				transform: rotate(0deg);
+			}
+			100% {
+				-ms-transform: rotate(360deg);
+				-moz-transform: rotate(360deg);
+				-webkit-transform: rotate(360deg);
+				-o-transform: rotate(360deg);
+				transform: rotate(360deg);
+			}
+		}
+		@-ms-keyframes uil-ring-anim {
+			0% {
+				-ms-transform: rotate(0deg);
+				-moz-transform: rotate(0deg);
+				-webkit-transform: rotate(0deg);
+				-o-transform: rotate(0deg);
+				transform: rotate(0deg);
+			}
+			100% {
+				-ms-transform: rotate(360deg);
+				-moz-transform: rotate(360deg);
+				-webkit-transform: rotate(360deg);
+				-o-transform: rotate(360deg);
+				transform: rotate(360deg);
+			}
+		}
+		@-moz-keyframes uil-ring-anim {
+			0% {
+				-ms-transform: rotate(0deg);
+				-moz-transform: rotate(0deg);
+				-webkit-transform: rotate(0deg);
+				-o-transform: rotate(0deg);
+				transform: rotate(0deg);
+			}
+			100% {
+				-ms-transform: rotate(360deg);
+				-moz-transform: rotate(360deg);
+				-webkit-transform: rotate(360deg);
+				-o-transform: rotate(360deg);
+				transform: rotate(360deg);
+			}
+		}
+		@-webkit-keyframes uil-ring-anim {
+			0% {
+				-ms-transform: rotate(0deg);
+				-moz-transform: rotate(0deg);
+				-webkit-transform: rotate(0deg);
+				-o-transform: rotate(0deg);
+				transform: rotate(0deg);
+			}
+			100% {
+				-ms-transform: rotate(360deg);
+				-moz-transform: rotate(360deg);
+				-webkit-transform: rotate(360deg);
+				-o-transform: rotate(360deg);
+				transform: rotate(360deg);
+			}
+		}
+		@-o-keyframes uil-ring-anim {
+			0% {
+				-ms-transform: rotate(0deg);
+				-moz-transform: rotate(0deg);
+				-webkit-transform: rotate(0deg);
+				-o-transform: rotate(0deg);
+				transform: rotate(0deg);
+			}
+			100% {
+				-ms-transform: rotate(360deg);
+				-moz-transform: rotate(360deg);
+				-webkit-transform: rotate(360deg);
+				-o-transform: rotate(360deg);
+				transform: rotate(360deg);
+			}
+		}
+		@keyframes uil-ring-anim {
+			0% {
+				-ms-transform: rotate(0deg);
+				-moz-transform: rotate(0deg);
+				-webkit-transform: rotate(0deg);
+				-o-transform: rotate(0deg);
+				transform: rotate(0deg);
+			}
+			100% {
+				-ms-transform: rotate(360deg);
+				-moz-transform: rotate(360deg);
+				-webkit-transform: rotate(360deg);
+				-o-transform: rotate(360deg);
+				transform: rotate(360deg);
+			}
+		}
+		
+		#loading-text {
+		    color: white;
+		    font-size: 1.5rem;
+		}
+
+		.uil-ring-css {
+			background: none;
+			width: 300px;
+			height: 300px;
+			transform: scale(.7);
+			position: absolute;
+			margin: auto;
+		}
+		.uil-ring-css > div {
+			position: absolute;
+		    width: 300px;
+		    height: 300px;
+		    border: 50px solid white;
+		    border-radius: 50%;
+		    border-bottom-color: transparent;
+		    border-left-color: transparent;
+		    transform: rotate(-45deg);
+		    -moz-animation: uil-ring-anim 1s linear infinite;
+		    -webkit-animation: uil-ring-anim 1s linear infinite;
+		    -o-animation: uil-ring-anim 1s linear infinite;
+		    animation: uil-ring-anim 1s linear infinite
+		}
+
+        body {
+                height: 100vh;
+                overflow: hidden;
+            }
+            #main-container, footer {
+                display: none;
+            }
+        </style>
     </head>
     <body class="noselect">
         {{{body}}}
@@ -79,6 +245,17 @@
                 </li>
             </ul>
             <div id="context-menu-overlay" class="hide"></div>
+            <div class="initial-load" style="height: 100vh;
+                    width: 100vw;
+                    background: #2d2d2d;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;">
+                    <div class="uil-ring-css" style="transform:scale(0.7);">
+					<div></div>
+                	</div>
+					<p id="loading-text">Loading</p>
+            </div>
         {{/unless}}
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
         <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.0/socket.io.slim.js"></script>