diff --git a/popup/popup.css b/popup/popup.css index 0c31ce7..e9e616b 100644 --- a/popup/popup.css +++ b/popup/popup.css @@ -37,6 +37,41 @@ body { 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 { --bg-color: #f8f9fa; --text-color: #1a1a1a; diff --git a/popup/popup.html b/popup/popup.html index a0c45fd..e201eb4 100644 --- a/popup/popup.html +++ b/popup/popup.html @@ -11,6 +11,9 @@ +
+ +
diff --git a/src/popup/PopupController.ts b/src/popup/PopupController.ts index b81793b..370f665 100644 --- a/src/popup/PopupController.ts +++ b/src/popup/PopupController.ts @@ -22,6 +22,15 @@ export class PopupController { this.translateTitles(); this.setupEventListeners(); 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 {