design overhaul and default route

public/js/bootstrap-loader.js

@@ -3,6 +3,14 @@
 
   const versions = Object.freeze({ app: '0.12.14', jquery: '4.0.0', jqueryUi: '1.14.2' });
   const steps = ['jquery', 'jquery-ui', 'modules', 'server', 'routes', 'location'];
+  const stepLabels = Object.freeze({
+    jquery: 'jQuery laden …',
+    'jquery-ui': 'jQuery UI laden …',
+    modules: 'Anwendungsmodule laden …',
+    server: 'Server prüfen …',
+    routes: 'Routen laden …',
+    location: 'Standort ermitteln …'
+  });
   const screen = document.getElementById('bootstrap-screen');
   const progress = document.getElementById('bootstrap-progress');
   const errorBox = document.getElementById('bootstrap-error');
@@ -10,16 +18,54 @@
   const enter = document.getElementById('bootstrap-enter');
   const readyText = document.getElementById('bootstrap-ready');
   const cleanupStatus = document.getElementById('storage-cleanup-status');
+  const actionStatus = document.getElementById('bootstrap-action-status');
+  const statusText = document.getElementById('bootstrap-status-text');
   let ready = false;
+  let statusTransition = 0;
 
   const versioned = path => `${path}${path.includes('?') ? '&' : '?'}v=${encodeURIComponent(versions.app)}`;
 
+  function setStatusText(text, immediate = false) {
+    if (!statusText) return;
+    statusTransition += 1;
+    const transition = statusTransition;
+    if (immediate) {
+      statusText.textContent = text;
+      statusText.classList.remove('is-fading');
+      return;
+    }
+    statusText.classList.add('is-fading');
+    globalThis.setTimeout(() => {
+      if (transition !== statusTransition) return;
+      statusText.textContent = text;
+      statusText.classList.remove('is-fading');
+    }, 180);
+  }
+
+  function nextPendingStep() {
+    return steps.find(step => !document.querySelector(`[data-step="${step}"]`)?.classList.contains('done'));
+  }
+
+  function announceStep(step) {
+    if (stepLabels[step]) setStatusText(stepLabels[step]);
+  }
+
   function mark(step, state) {
     const item = document.querySelector(`[data-step="${step}"]`);
     if (!item) return;
     item.classList.remove('done', 'failed');
     item.classList.add(state);
+    item.dataset.state = state;
     progress.value = document.querySelectorAll('#bootstrap-steps .done').length;
+
+    if (state === 'failed') {
+      setStatusText(`Fehler bei: ${stepLabels[step] || step}`);
+      return;
+    }
+    if (state === 'done') {
+      const next = nextPendingStep();
+      if (next) announceStep(next);
+    }
   }
 
   function loadScript(src, test) {
@@ -78,7 +124,14 @@
     screen.setAttribute('aria-busy', 'false');
     screen.classList.add('ready');
     readyText.hidden = false;
+
+    setStatusText('Vorbereitung abgeschlossen.');
+    actionStatus?.classList.add('is-leaving');
     enter.hidden = false;
+    globalThis.requestAnimationFrame(() => enter.classList.add('is-visible'));
+    globalThis.setTimeout(() => {
+      if (actionStatus) actionStatus.hidden = true;
+    }, 220);
     enter.focus();
   }
 
@@ -88,11 +141,18 @@
     screen.classList.remove('ready');
     readyText.hidden = true;
     enter.hidden = true;
+    enter.classList.remove('is-visible');
     errorBox.hidden = true;
     retry.hidden = true;
+    if (actionStatus) {
+      actionStatus.hidden = false;
+      actionStatus.classList.remove('is-leaving');
+    }
 
     try {
+      setStatusText('Lokalen Speicher prüfen …', true);
       await cleanupOldProgress();
+      announceStep('jquery');
 
       await loadScript(
         `vendor/jquery/jquery-${versions.jquery}.min.js`,
@@ -116,7 +176,7 @@
       showReadyState();
     } catch (error) {
       console.error(error);
-      const current = steps.find(step => !document.querySelector(`[data-step="${step}"]`)?.classList.contains('done'));
+      const current = nextPendingStep();
       if (current) mark(current, 'failed');
       errorBox.textContent = error.message;
       errorBox.hidden = false;