added loading overlay on socket.io server connection

public/css/modules/animations.css

@@ -0,0 +1,41 @@
+/* Source: https://loading.io/css/ */
+.lds-ring {
+	display: inline-block;
+	position: relative;
+	width: 80px;
+	height: 80px;
+}
+
+.lds-ring div {
+	box-sizing: border-box;
+	display: block;
+	position: absolute;
+	width: 64px;
+	height: 64px;
+	margin: 8px;
+	border: 8px solid #fff;
+	border-radius: 50%;
+	animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+	border-color: #fff transparent transparent transparent;
+}
+
+.lds-ring div:nth-child(1) {
+	animation-delay: -0.45s;
+}
+
+.lds-ring div:nth-child(2) {
+	animation-delay: -0.3s;
+}
+
+.lds-ring div:nth-child(3) {
+	animation-delay: -0.15s;
+}
+
+@keyframes lds-ring {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}

public/css/modules/globals.css

@@ -1,3 +1,25 @@
+#loading_overlay {
+	justify-content: center;
+	align-items: center;
+	position: absolute;
+	flex-direction: column;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+	background: rgba(0, 0, 0, 0.5);
+	display: none;
+	z-index: 1000;
+}
+
+#loading_overlay.active {
+	display: flex;
+}
+
+#loading_text {
+	margin-bottom: 20px;
+}
+
 #main_content {
 	margin-left: 48px;
 	width: calc(100% - 48px);

public/css/style.css

@@ -6,6 +6,7 @@
 @import './modules/normalize.css';
 @import './modules/base.css';
 @import './modules/globals.css';
+@import './modules/animations.css';
 @import './modules/progressbar.css';
 
 @import './modules/sidebar.css';