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/dayDetail.js

@@ -166,9 +166,12 @@ function positionPopover(panel, cellRect) {
 
 /**
  * Show panel as bottom sheet (fixed at bottom).
+ * Renders panel closed (translateY(100%)), then on next frame adds open/visible classes for animation.
  */
 function showAsBottomSheet() {
   if (!panelEl || !overlayEl) return;
+  overlayEl.classList.remove("day-detail-overlay--visible");
+  panelEl.classList.remove("day-detail-panel--open");
   overlayEl.hidden = false;
   panelEl.classList.add("day-detail-panel--sheet");
   panelEl.style.left = "";
@@ -181,8 +184,14 @@ function showAsBottomSheet() {
   document.body.classList.add("day-detail-sheet-open");
   document.body.style.top = "-" + sheetScrollY + "px";
 
-  const closeBtn = panelEl.querySelector(".day-detail-close");
-  if (closeBtn) closeBtn.focus();
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      overlayEl.classList.add("day-detail-overlay--visible");
+      panelEl.classList.add("day-detail-panel--open");
+      const closeBtn = panelEl.querySelector(".day-detail-close");
+      if (closeBtn) closeBtn.focus();
+    });
+  });
 }
 
 /**
@@ -205,14 +214,48 @@ function showAsPopover(cellRect) {
   setTimeout(() => document.addEventListener("click", popoverCloseHandler), 0);
 }
 
+/** Timeout fallback (ms) if transitionend does not fire (e.g. prefers-reduced-motion). */
+const SHEET_CLOSE_TIMEOUT_MS = 400;
+
 /**
- * Hide panel and overlay.
+ * Hide panel and overlay. For bottom sheet: remove open classes, wait for transitionend (or timeout), then cleanup.
  */
 export function hideDayDetail() {
   if (popoverCloseHandler) {
     document.removeEventListener("click", popoverCloseHandler);
     popoverCloseHandler = null;
   }
+  const isSheet =
+    panelEl &&
+    overlayEl &&
+    panelEl.classList.contains("day-detail-panel--sheet") &&
+    document.body.classList.contains("day-detail-sheet-open");
+
+  if (isSheet) {
+    panelEl.classList.remove("day-detail-panel--open");
+    overlayEl.classList.remove("day-detail-overlay--visible");
+
+    const finishClose = () => {
+      if (closeTimeoutId != null) clearTimeout(closeTimeoutId);
+      panelEl.removeEventListener("transitionend", onTransitionEnd);
+      document.body.classList.remove("day-detail-sheet-open");
+      document.body.style.top = "";
+      window.scrollTo(0, sheetScrollY);
+      panelEl.classList.remove("day-detail-panel--sheet");
+      panelEl.hidden = true;
+      overlayEl.hidden = true;
+    };
+
+    let closeTimeoutId = setTimeout(finishClose, SHEET_CLOSE_TIMEOUT_MS);
+
+    const onTransitionEnd = (e) => {
+      if (e.target !== panelEl || e.propertyName !== "transform") return;
+      finishClose();
+    };
+    panelEl.addEventListener("transitionend", onTransitionEnd);
+    return;
+  }
+
   if (document.body.classList.contains("day-detail-sheet-open")) {
     document.body.classList.remove("day-detail-sheet-open");
     document.body.style.top = "";