From 0a3133241ead61f1236c8e6b4a4f31c3f1951272 Mon Sep 17 00:00:00 2001
From: KorbsStudio <ks@korbsstudio.com>
Date: Fri, 17 Feb 2023 18:03:03 -0500
Subject: [PATCH] Add a loading indicator for WebViews

---
 astro/components/Sidebar.astro |  5 +++--
 astro/layouts/App.astro        |  1 +
 astro/styles/index.scss        | 14 ++++++++++++++
 public/scripts/webview.js      | 14 ++++++++++++++
 4 files changed, 32 insertions(+), 2 deletions(-)
 create mode 100644 public/scripts/webview.js

diff --git a/astro/components/Sidebar.astro b/astro/components/Sidebar.astro
index 70b922a..243dbd6 100644
--- a/astro/components/Sidebar.astro
+++ b/astro/components/Sidebar.astro
@@ -10,10 +10,11 @@ import { SIDEBARTOP, SIDEBARBOTTOM } from '../tabs'
     </div>
     <div class="sidebar-top">
         {SIDEBARTOP.map(item => (
-            <li data-tab={item.text} class={item.default ? "active" : null}>
+            <li onclick="ws()" data-tab={item.text} class={item.default ? "active" : null}>
                 <i class={item.icon}></i>
                 <p>{item.text}</p>
-                {item.navigation ? 
+                {item.navigation ?
+                <div class="loading-indicator"><i class="fa-solid fa-circle-notch fa-spin"></i></div>
                 <div id="Tab" class="webview-navigation">
                     <button onclick='document.querySelector(".active webview").goBack()'><i class="fa-solid fa-arrow-left-long"></i></button>
                     <button onclick='document.querySelector(".active webview").goForward()'><i class="fa-solid fa-arrow-right-long"></i></button>
diff --git a/astro/layouts/App.astro b/astro/layouts/App.astro
index aa29f2c..4b9d73d 100644
--- a/astro/layouts/App.astro
+++ b/astro/layouts/App.astro
@@ -16,6 +16,7 @@ import '../styles/notification.scss'
 ---
 <script src="./scripts/navigation.js" crossoarigin="anonymous"></script>
 <script src="./scripts/theme.js" crossoarigin="anonymous"></script>
+<script src="./scripts/webview.js" crossoarigin="anonymous"></script>
 <script defer src="./font-awesome-6.3.0/js/all.js"></script>
 
 <div class="content">
diff --git a/astro/styles/index.scss b/astro/styles/index.scss
index fd8e698..e598c73 100644
--- a/astro/styles/index.scss
+++ b/astro/styles/index.scss
@@ -189,6 +189,19 @@ body {
 .active .webview-navigation#Tab {
     display: grid;
 }
+.active .loading-indicator {
+    display: grid;
+    opacity: 0;
+    transition: 0.3s opacity;
+}
+.loading-indicator {
+    position: absolute;
+    left: 20px;
+    background: var(--TabActiveBackground);
+    color: var(--TabActiveText);
+    border-radius: 50px;
+    display: none;
+}
 .webview-navigation#Tab {
     display: none;
     grid-auto-flow: column;
@@ -199,6 +212,7 @@ body {
         aspect-ratio: 1;
         height: 32px;
         width: 32px;
+        color: var(--WebviewControlsColor);
         fill: var(--WebviewControlsColor);
         background: var(--WebViewControlBackground);
         border: none;
diff --git a/public/scripts/webview.js b/public/scripts/webview.js
new file mode 100644
index 0000000..1c577e9
--- /dev/null
+++ b/public/scripts/webview.js
@@ -0,0 +1,14 @@
+function ws() {
+    setTimeout(() => {
+        if(document.querySelector('.active .webview-navigation#Tab')){ // Check if the tab has the navigation controls
+            const WLSTA = () => {document.querySelector('.active .loading-indicator').style.opacity = '1'}
+            const WLSTO = () => {document.querySelector('.active .loading-indicator').style.opacity = '0'}
+
+            document.querySelector('.active webview').addEventListener('did-start-loading', WLSTA)
+            document.querySelector('.active webview').addEventListener('did-stop-loading', WLSTO)
+        } else
+        {
+            // Don't do anything if the tab has no navigation controls
+        }
+    }, 0200)
+}
\ No newline at end of file