prehistoric-systems/uBlock
1
0
Fork 0
mirror of https://github.com/gorhill/uBlock.git synced 2026-03-11 09:04:36 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

[mv3] Show spinner when filtering mode change takes long

Browse source 
Related issue:
https://github.com/uBlockOrigin/uBOL-home/discussions/583

If the filtering mode change takes more than a second, a spinner
covering the whole popup panel will appear until the browser
API calls complete.
This commit is contained in:
Raymond Hill 2026-01-11 13:26:16 -05:00
parent 3c1c84df50
commit dfeb4e79ed
No known key found for this signature in database
GPG key ID: F5630CAE62A14316
3 changed files with 46 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
platform/mv3/extension/css/popup.css
View file

@ -1,4 +1,12 @@
/* External CSS values override */ @keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes busy {
to { opacity: 90%; }
}
/* External CSS values override */
.fa-icon.fa-icon-badged > .fa-icon-badge { .fa-icon.fa-icon-badged > .fa-icon-badge {
bottom: auto; bottom: auto;
top: -20%; top: -20%;
@ -30,14 +38,39 @@ a {
outline: 0; outline: 0;
} }
#main { main {
align-self: flex-start; align-self: flex-start;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
:root.portrait #main { body.busy main {
pointer-events: none;
}
:root.portrait main {
align-self: inherit; align-self: inherit;
} }
aside {
background-color: var(--surface-1);
bottom: 0;
display: none;
left: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
z-index: 1000;
}
aside .fa-icon {
animation: spin 1s steps(8) infinite;
fill: var(--surface-3);
font-size: 4em;
margin: 2em;
}
body.busy aside {
animation: busy 0s step-start 1s;
animation-fill-mode: forwards;
display: block;
}
hr { hr {
margin: 0.5em 0; margin: 0.5em 0;
} }
@ -185,7 +218,7 @@ body.needReload #refresh {
overflow-y: auto; overflow-y: auto;
width: 100%; width: 100%;
} }
:root.portrait #main { :root.portrait main {
max-width: unset; max-width: unset;
} }
/* mouse-driven devices */ /* mouse-driven devices */

6
platform/mv3/extension/js/popup.js
View file

@ -42,7 +42,7 @@ function renderAdminRules() {
const BLOCKING_MODE_MAX = 3; const BLOCKING_MODE_MAX = 3;
function setFilteringMode(level, commit = false) { async function setFilteringMode(level, commit = false) {
const modeSlider = qs$('.filteringModeSlider'); const modeSlider = qs$('.filteringModeSlider');
modeSlider.dataset.level = level; modeSlider.dataset.level = level;
if ( qs$('.filteringModeSlider.moving') === null ) { if ( qs$('.filteringModeSlider.moving') === null ) {
@ -52,7 +52,9 @@ function setFilteringMode(level, commit = false) {
); );
} }
if ( commit !== true ) { return; } if ( commit !== true ) { return; }
commitFilteringMode(); dom.cl.add(dom.body, 'busy');
await commitFilteringMode();
dom.cl.remove(dom.body, 'busy');
} }
async function commitFilteringMode() { async function commitFilteringMode() {

7
platform/mv3/extension/popup.html
View file

@ -15,7 +15,7 @@
<body class="loading"> <body class="loading">
<div id="main"> <main>
<div id="hostname"><span></span>&shy;<span></span></div> <div id="hostname"><span></span>&shy;<span></span></div>
<!-- -------- --> <!-- -------- -->
<div class="filteringModeSlider"> <div class="filteringModeSlider">
@ -52,7 +52,10 @@
<span id="gotoMatchedRules" class="fa-icon tool" tabindex="0" title="Show matched rules">list-alt<span class="caption">Show matched rules</span></span> <span id="gotoMatchedRules" class="fa-icon tool" tabindex="0" title="Show matched rules">list-alt<span class="caption">Show matched rules</span></span>
<span id="gotoDashboard" class="fa-icon tool enabled" tabindex="0" data-i18n-title="popupTipDashboard">cogs<span class="caption" data-i18n="popupTipDashboard"></span></span> <span id="gotoDashboard" class="fa-icon tool enabled" tabindex="0" data-i18n-title="popupTipDashboard">cogs<span class="caption" data-i18n="popupTipDashboard"></span></span>
</div> </div>
</div> </main>
<aside>
<span class="fa-icon">spinner</span>
</aside>
<script src="js/theme.js" type="module"></script> <script src="js/theme.js" type="module"></script>
<script src="js/fa-icons.js" type="module"></script> <script src="js/fa-icons.js" type="module"></script>