Add a loading indicator for WebViews
This commit is contained in:
parent
ab62f32a42
commit
0a3133241e
4 changed files with 32 additions and 2 deletions
|
@ -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>
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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
14
public/scripts/webview.js
Normal 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)
|
||||
}
|
Reference in a new issue