obsqrbtz/goose-highlighter
1
0
Fork 0
mirror of https://github.com/obsqrbtz/goose-highlighter.git synced 2026-04-08 20:19:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

nit: show spinner while user settings are loaded

Browse Source
This commit is contained in:
Daniel Dada
2025-11-20 14:13:49 +03:00
parent 348d64f356
commit 521b3295e6
3 changed files with 47 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
popup/popup.css
View File

@@ -37,6 +37,41 @@ body {
flex-direction: column; flex-direction: column;
} }
/* Loading Overlay */
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--bg-color);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
transition: opacity 0.2s ease-out;
}
.loading-overlay.hidden {
opacity: 0;
pointer-events: none;
}
.loading-spinner {
width: 32px;
height: 32px;
border: 3px solid var(--input-border);
border-top-color: var(--accent);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
body.light { body.light {
--bg-color: #f8f9fa; --bg-color: #f8f9fa;
--text-color: #1a1a1a; --text-color: #1a1a1a;

3
popup/popup.html
View File

@@ -11,6 +11,9 @@
</head> </head>
<body class="dark"> <body class="dark">
<div class="loading-overlay">
<div class="loading-spinner"></div>
</div>
<div class="container"> <div class="container">
<div class="header-bar"> <div class="header-bar">

9
src/popup/PopupController.ts
View File

@@ -22,6 +22,15 @@ export class PopupController {
this.translateTitles(); this.translateTitles();
this.setupEventListeners(); this.setupEventListeners();
this.render(); this.render();
this.hideLoadingOverlay();
}
private hideLoadingOverlay(): void {
const overlay = document.querySelector('.loading-overlay');
if (overlay) {
overlay.classList.add('hidden');
setTimeout(() => overlay.remove(), 200);
}
} }
private async loadData(): Promise<void> { private async loadData(): Promise<void> {