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

3
astro/components/Sidebar.astro
View file

@ -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 ?
<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>

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/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">

14
astro/styles/index.scss
View file

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

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