feat: enhance loading indicator and improve UI transitions

- Updated the loading indicator in `index.html` to include a spinner and text for better user feedback during loading.
- Added CSS transitions for smoother visual effects on various elements, including buttons and overlays, enhancing overall user experience.
- Refactored JavaScript functions to utilize requestAnimationFrame for improved animation performance when showing and hiding panels.
- Implemented smooth scrolling behavior for duty list navigation, improving usability when focusing on current duties.

webapp/js/hints.js

@@ -16,6 +16,7 @@ export function positionHint(hintEl, btnRect) {
   const vw = document.documentElement.clientWidth;
   const margin = 12;
   hintEl.classList.remove("below");
+  hintEl.classList.remove("calendar-event-hint--visible");
   hintEl.style.left = btnRect.left + "px";
   hintEl.style.top = btnRect.top - 4 + "px";
   hintEl.hidden = false;
@@ -45,6 +46,9 @@ export function positionHint(hintEl, btnRect) {
         hintEl.style.left = left2 + "px";
       });
     }
+    requestAnimationFrame(() => {
+      hintEl.classList.add("calendar-event-hint--visible");
+    });
   });
 }
 
@@ -268,8 +272,11 @@ export function bindInfoButtonTooltips() {
         positionHint(hintEl, rect);
         hintEl.dataset.active = "1";
       } else {
-        hintEl.hidden = true;
-        hintEl.removeAttribute("data-active");
+        hintEl.classList.remove("calendar-event-hint--visible");
+        setTimeout(() => {
+          hintEl.hidden = true;
+          hintEl.removeAttribute("data-active");
+        }, 150);
       }
     });
   });
@@ -277,14 +284,20 @@ export function bindInfoButtonTooltips() {
     document._calendarHintBound = true;
     document.addEventListener("click", () => {
       if (hintEl.dataset.active) {
-        hintEl.hidden = true;
-        hintEl.removeAttribute("data-active");
+        hintEl.classList.remove("calendar-event-hint--visible");
+        setTimeout(() => {
+          hintEl.hidden = true;
+          hintEl.removeAttribute("data-active");
+        }, 150);
       }
     });
     document.addEventListener("keydown", (e) => {
       if (e.key === "Escape" && hintEl.dataset.active) {
-        hintEl.hidden = true;
-        hintEl.removeAttribute("data-active");
+        hintEl.classList.remove("calendar-event-hint--visible");
+        setTimeout(() => {
+          hintEl.hidden = true;
+          hintEl.removeAttribute("data-active");
+        }, 150);
       }
     });
   }
@@ -324,6 +337,7 @@ export function bindDutyMarkerTooltips() {
     });
     marker.addEventListener("mouseleave", () => {
       if (hintEl.dataset.active) return;
+      hintEl.classList.remove("calendar-event-hint--visible");
       hideTimeout = setTimeout(() => {
         hintEl.hidden = true;
         hideTimeout = null;
@@ -332,8 +346,11 @@ export function bindDutyMarkerTooltips() {
     marker.addEventListener("click", (e) => {
       e.stopPropagation();
       if (marker.classList.contains("calendar-marker-active")) {
-        hintEl.hidden = true;
-        hintEl.removeAttribute("data-active");
+        hintEl.classList.remove("calendar-event-hint--visible");
+        setTimeout(() => {
+          hintEl.hidden = true;
+          hintEl.removeAttribute("data-active");
+        }, 150);
         marker.classList.remove("calendar-marker-active");
         return;
       }
@@ -355,16 +372,22 @@ export function bindDutyMarkerTooltips() {
     document._dutyMarkerHintBound = true;
     document.addEventListener("click", () => {
       if (hintEl.dataset.active) {
-        hintEl.hidden = true;
-        hintEl.removeAttribute("data-active");
-        clearActiveDutyMarker();
+        hintEl.classList.remove("calendar-event-hint--visible");
+        setTimeout(() => {
+          hintEl.hidden = true;
+          hintEl.removeAttribute("data-active");
+          clearActiveDutyMarker();
+        }, 150);
       }
     });
     document.addEventListener("keydown", (e) => {
       if (e.key === "Escape" && hintEl.dataset.active) {
-        hintEl.hidden = true;
-        hintEl.removeAttribute("data-active");
-        clearActiveDutyMarker();
+        hintEl.classList.remove("calendar-event-hint--visible");
+        setTimeout(() => {
+          hintEl.hidden = true;
+          hintEl.removeAttribute("data-active");
+          clearActiveDutyMarker();
+        }, 150);
       }
     });
   }