56 add spa loading template

README.md

@@ -40,6 +40,17 @@ pnpm run dev
 
 4. Head to http://localhost:3000/
 
+If it works, great!
+
+> [!IMPORTANT]
+> Following instruction is optional and may be skipped. If you have slow internet, it may take a while to 
+> install Chrome, Safari and Firefox (~150 MB)
+
+5. Install playwright browsers
+```
+npx playwright install     
+```
+
 ### Backend
 
 1. go into the backend directory

docs/de/developers/setup.md

@@ -34,6 +34,18 @@ pnpm run dev
 
 4. Gehe zu `http://localhost:3000/`
 
+Wenn es funktioniert, toll!
+
+::: warning WARNUNG
+Folgende Anweisung ist optional und kann übersprungen werden. Falls Sie langsames Internet haben, könnte es eine 
+Weile dauern bis Sie Chrome, Safari und Firefox installiert haben (~150 MB)
+:::
+
+5. Installiere playwright browser
+```
+npx playwright install     
+```
+
 ## Backend
 
 1. Wechseln Sie in das Backend-Verzeichnis

docs/developers/setup.md

@@ -34,6 +34,18 @@ pnpm run dev
 
 4. Head to `http://localhost:3000/`
 
+If it works, great!
+
+::: warning
+Following instruction is optional and may be skipped. If you have slow internet, it may take a while to
+install Chrome, Safari and Firefox (~150 MB)
+:::
+
+5. Install playwright browsers
+```
+npx playwright install     
+```
+
 ## Backend
 
 1. go into the backend directory

frontend/app/spa-loading-template.html

@@ -0,0 +1,63 @@
+<style>
+    .loading {
+        background-color: #f6f6f6;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #155380;
+    }
+
+    .dark {
+      .loading {
+        background-color: #f6f6f6;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #155380;
+      }
+    }
+
+    #spinner {
+        width: 30px;
+    }
+
+    #spinner #sGD stop {
+        stop-color: #1664a3;
+    }
+
+    #spinner .path-solid {
+        stroke: #167da3;
+    }
+</style>
+<div class="loading">
+  <svg viewBox="0 0 64 64" width="1em" xmlns="http://www.w3.org/2000/svg" id="spinner">
+    <circle class="path-gradient" cx="32" cy="32" r="28" fill="none" stroke="url(#sGD)" stroke-width="8"/>
+    <path class="path-solid" d="M 32,4 A 28 28,0,0,0,32,60" fill="none" stroke="#000" stroke-width="8"
+          stroke-linecap="round"/>
+
+    <defs>
+      <linearGradient id="sGD" gradientUnits="userSpaceOnUse" x1="32" y1="0" x2="32" y2="64">
+        <stop stop-color="#000" offset="0.1" stop-opacity="0" class="stop1"></stop>
+        <stop stop-color="#000" offset=".9" stop-opacity="1" class="stop2"></stop>
+      </linearGradient>
+    </defs>
+
+    <animateTransform
+      values="0,0,0;360,0,0"
+      attributeName="transform"
+      type="rotate"
+      repeatCount="indefinite"
+      dur="750ms">
+    </animateTransform>
+  </svg>
+</div>

frontend/test/e2e/app.spec.ts

@@ -5,3 +5,9 @@ test("has title", async ({page}) => {
 
   await expect(page).toHaveTitle(/Schulbuchaktion/)
 })
+
+test("has spa loading template", async ({page}) => {
+  await page.goto("/")
+
+  await page.locator(".loading").isVisible()
+})