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') +})