Korbs/Nexus-Polestar
Archived
1
Fork 0
Code Issues Pull requests Activity

Add a loading indicator for WebViews

Browse source
This commit is contained in:
KorbsStudio 2023-02-17 18:03:03 -05:00
parent ab62f32a42
commit 0a3133241e
No known key found for this signature in database
4 changed files with 32 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
astro/components/Sidebar.astro
View file

@ -10,10 +10,11 @@ import { SIDEBARTOP, SIDEBARBOTTOM } from '../tabs'
</div> </div>
<div class="sidebar-top"> <div class="sidebar-top">
{SIDEBARTOP.map(item => ( {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> <i class={item.icon}></i>
<p>{item.text}</p> <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"> <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").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> <button onclick='document.querySelector(".active webview").goForward()'><i class="fa-solid fa-arrow-right-long"></i></button>

1
astro/layouts/App.astro
View file

@ -16,6 +16,7 @@ import '../styles/notification.scss'
--- ---
<script src="./scripts/navigation.js" crossoarigin="anonymous"></script> <script src="./scripts/navigation.js" crossoarigin="anonymous"></script>
<script src="./scripts/theme.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> <script defer src="./font-awesome-6.3.0/js/all.js"></script>
<div class="content"> <div class="content">

14
astro/styles/index.scss
View file

@ -189,6 +189,19 @@ body {
.active .webview-navigation#Tab { .active .webview-navigation#Tab {
display: grid; 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 { .webview-navigation#Tab {
display: none; display: none;
grid-auto-flow: column; grid-auto-flow: column;
@ -199,6 +212,7 @@ body {
aspect-ratio: 1; aspect-ratio: 1;
height: 32px; height: 32px;
width: 32px; width: 32px;
color: var(--WebviewControlsColor);
fill: var(--WebviewControlsColor); fill: var(--WebviewControlsColor);
background: var(--WebViewControlBackground); background: var(--WebViewControlBackground);
border: none; border: none;

14
public/scripts/webview.js Normal file
View file

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