From b8cf32813d37c4b939d683082847a2ffabba6132 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20Erbsh=C3=A4u=C3=9Fer?= <tobias@tesoft.dev>
Date: Sun, 24 May 2026 09:22:43 +0200
Subject: [PATCH] add loader section component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Tobias Erbshäußer <tobias@tesoft.dev>
---
 frontend/src/components/loader-section.njk | 37 ++++++++++++++++++++++
 frontend/src/components/loader-section.ts  | 23 ++++++++++++++
 2 files changed, 60 insertions(+)
 create mode 100644 frontend/src/components/loader-section.njk
 create mode 100644 frontend/src/components/loader-section.ts

diff --git a/frontend/src/components/loader-section.njk b/frontend/src/components/loader-section.njk
new file mode 100644
index 0000000..8eff3c0
--- /dev/null
+++ b/frontend/src/components/loader-section.njk
@@ -0,0 +1,37 @@
+<template id="tesoft-loader-section-template">
+    <style>
+        @import "/src/styles/default.css";
+
+        :host {
+            display: grid;
+        }
+
+        :host > div {
+            align-items: center;
+            display: grid;
+            grid-template-columns: 1fr;
+            grid-template-rows: 1fr;
+            justify-items: center;
+        }
+
+        :host([loaded]) > div {
+            align-self: start;
+        }
+
+        :host(:not([loaded])) slot {
+            display: none;
+        }
+
+        :host([loaded]) tesoft-loader {
+            display: none;
+        }
+    </style>
+
+    <div>
+        <tesoft-loader></tesoft-loader>
+        <slot></slot>
+    </div>
+</template>
+
+<script src="/src/components/loader-section.ts" type="module"></script>
+{% includeOnce 'components/loader.njk' %}
diff --git a/frontend/src/components/loader-section.ts b/frontend/src/components/loader-section.ts
new file mode 100644
index 0000000..41cf46d
--- /dev/null
+++ b/frontend/src/components/loader-section.ts
@@ -0,0 +1,23 @@
+import {TesoftComponent} from "../scripts/main.ts";
+
+export class TesoftLoaderSection extends TesoftComponent {
+    constructor() {
+        super();
+
+        const template = document.getElementById("tesoft-loader-section-template") as HTMLTemplateElement;
+        const templateContent = template.content;
+
+        const shadowRoot = this.attachShadow({mode: "open"});
+        shadowRoot.appendChild(templateContent.cloneNode(true));
+    }
+
+    reset() {
+        this.removeAttribute("loaded");
+    }
+
+    finish() {
+        this.setAttribute("loaded", "");
+    }
+}
+
+customElements.define("tesoft-loader-section", TesoftLoaderSection);