evan/deemixer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added loading overlay on socket.io server connection

Browse Source
This commit is contained in:
Roberto Tonino 2020-05-05 22:27:37 +02:00
parent 1087d0ee0c
commit 53878a440a
6 changed files with 80 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
public/css/modules/animations.css Normal file
View File

@ -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);
}
}

22
public/css/modules/globals.css
View File

@ -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 { #main_content {
margin-left: 48px; margin-left: 48px;
width: calc(100% - 48px); width: calc(100% - 48px);

1
public/css/style.css
View File

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

10
public/index.html
View File

@ -16,6 +16,16 @@
</head> </head>
<body> <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"> <aside id="sidebar" role="navigation">
<span id="main_home_tablink" class="main_tablinks" role="link" aria-label="home"><i <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> class="material-icons side_icon">home</i><span class="main_tablinks_text">Home</span></span>

4
public/js/app.js
View File

@ -97,10 +97,10 @@ function startApp() {
$('#login_input_arl').val(arl) $('#login_input_arl').val(arl)
} }
if ('true' === localStorage.getItem('slimDownloads')) { if ('true' === localStorage.getItem('slimDownloads')) {
document.getElementById("download_list").classList.add("slim") document.getElementById('download_list').classList.add('slim')
} }
let spotifyUser = localStorage.getItem('spotifyUser') let spotifyUser = localStorage.getItem('spotifyUser')
if (spotifyUser != ''){ if (spotifyUser != '') {
socket.emit('update_userSpotifyPlaylists', spotifyUser) socket.emit('update_userSpotifyPlaylists', spotifyUser)
} }
// Open default tab // Open default tab

4
public/js/modules/socket.js
View File

@ -1 +1,5 @@
export const socket = io.connect(window.location.href) export const socket = io.connect(window.location.href)
socket.on('connect', () => {
document.getElementById('loading_overlay').classList.remove('active')
})