From 53878a440aacaede54c494698a6544068763ac7e Mon Sep 17 00:00:00 2001
From: Roberto Tonino <roberto.tonino5@gmail.com>
Date: Tue, 5 May 2020 22:27:37 +0200
Subject: [PATCH] added loading overlay on socket.io server connection

---
 public/css/modules/animations.css | 41 +++++++++++++++++++++++++++++++
 public/css/modules/globals.css    | 22 +++++++++++++++++
 public/css/style.css              |  1 +
 public/index.html                 | 10 ++++++++
 public/js/app.js                  |  4 +--
 public/js/modules/socket.js       |  4 +++
 6 files changed, 80 insertions(+), 2 deletions(-)
 create mode 100644 public/css/modules/animations.css

diff --git a/public/css/modules/animations.css b/public/css/modules/animations.css
new file mode 100644
index 0000000..5b78547
--- /dev/null
+++ b/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);
+	}
+}
diff --git a/public/css/modules/globals.css b/public/css/modules/globals.css
index 32f051c..a5665af 100644
--- a/public/css/modules/globals.css
+++ b/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);
diff --git a/public/css/style.css b/public/css/style.css
index f15c2a8..3200013 100644
--- a/public/css/style.css
+++ b/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';
diff --git a/public/index.html b/public/index.html
index 2e3e909..d8e9335 100644
--- a/public/index.html
+++ b/public/index.html
@@ -16,6 +16,16 @@
 </head>
 
 <body>
+	<div id="loading_overlay" class="active">
+		<span id="loading_text">Connecting to the server...</span>
+		<div class="lds-ring">
+			<div></div>
+			<div></div>
+			<div></div>
+			<div></div>
+		</div>
+	</div>
+
 	<aside id="sidebar" role="navigation">
 		<span id="main_home_tablink" class="main_tablinks" role="link" aria-label="home"><i
 				class="material-icons side_icon">home</i><span class="main_tablinks_text">Home</span></span>
diff --git a/public/js/app.js b/public/js/app.js
index 24f83c7..1ceafbd 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -97,10 +97,10 @@ function startApp() {
 		$('#login_input_arl').val(arl)
 	}
 	if ('true' === localStorage.getItem('slimDownloads')) {
-		document.getElementById("download_list").classList.add("slim")
+		document.getElementById('download_list').classList.add('slim')
 	}
 	let spotifyUser = localStorage.getItem('spotifyUser')
-	if (spotifyUser != ''){
+	if (spotifyUser != '') {
 		socket.emit('update_userSpotifyPlaylists', spotifyUser)
 	}
 	// Open default tab
diff --git a/public/js/modules/socket.js b/public/js/modules/socket.js
index dbfd7b2..8383b3a 100644
--- a/public/js/modules/socket.js
+++ b/public/js/modules/socket.js
@@ -1 +1,5 @@
 export const socket = io.connect(window.location.href)
+
+socket.on('connect', () => {
+	document.getElementById('loading_overlay').classList.remove('active')
+})