show spinner while loading

porjo · Aug 4, 2024 · be6ff95 · be6ff95
1 parent 5e9c13b
commit be6ff95
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 1 deletion.
diff --git a/css/style.css b/css/style.css
@@ -271,3 +271,53 @@ footer, header, hgroup, menu, nav, section {
   border-bottom: 3px solid transparent;
   border-top: 3px solid #8F0808;
 }
+
+
+/* spinner */
+
+.lds-dual-ring,
+.lds-dual-ring:after {
+  box-sizing: border-box;
+}
+.lds-dual-ring {
+  display: inline-block;
+  width: 80px;
+  height: 80px;
+}
+.lds-dual-ring:after {
+  content: " ";
+  display: block;
+  width: 64px;
+  height: 64px;
+  margin: 8px;
+  border-radius: 50%;
+  border: 6.4px solid currentColor;
+  border-color: currentColor transparent currentColor transparent;
+  animation: lds-dual-ring 1.2s linear infinite;
+}
+@keyframes lds-dual-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.overlay {
+	display: none;
+	position: fixed;
+	top: 0;
+	left: 0;
+	height: 100%;
+	width: 100%;
+	z-index: 10;
+	background-color: rgba(255, 255, 255, 0.9)
+}
+
+.spinner {
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
diff --git a/index.html b/index.html
@@ -62,6 +62,12 @@ <h1 id="main_title">FreshTube</h1>
 				<p class='quiet_text'><strong>Note:</strong> the API key &amp; other data entered will be saved in your browser's local storage.</p>
 				<div class='github-link'><a href='https://github.com/porjo/freshtube'><img src='github-mark.svg' width="25px"/></a></div>
 			</div>
+
+			<div class="overlay">
+				<div class="spinner">
+					<div class="lds-dual-ring"></div>
+				</div>
+			</div>
 		</div>
 
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

diff --git a/js/script.js b/js/script.js
@@ -103,6 +103,7 @@ $('#save_button').click(function () {
 })
 
 function errorBox (data) {
+  $('.overlay').hide()
   window.scrollTo({ top: 0, behavior: 'smooth' })
   let errMsg = 'Unknown error occured'
   if (typeof data === 'object' && 'responseJSON' in data) {
@@ -113,7 +114,6 @@ function errorBox (data) {
     errMsg = data
   }
   $('#error-box').text('Error: ' + errMsg).show()
-  // return Promise.reject(errMsg)
 }
 
 async function refresh () {
@@ -212,6 +212,7 @@ async function processLine (line) {
 
 async function _refresh (lines) {
   $('#videos').html('')
+  $('.overlay').show()
 
   // update config
   config.lines = $('#video_urls').val().split('\n').filter(i => i) // filter ensures we don't get [""]
@@ -244,6 +245,8 @@ async function _refresh (lines) {
 
   getSponsorBlock()
   getLiveBroadcasts()
+
+  $('.overlay').hide()
 }
 
 // channel with most recently published visible video first