From 30401f8b59b91c13a18d427594dbdcd7ad7de011 Mon Sep 17 00:00:00 2001
From: Daniel Karbach <daniel.karbach@localhorst.tv>
Date: Sat, 21 Jun 2025 17:12:18 +0200
Subject: [PATCH] better loading screen

---
 resources/js/components/common/Loading.jsx | 13 ++++++--
 resources/js/i18n/de.js                    |  1 +
 resources/js/i18n/en.js                    |  1 +
 resources/sass/common.scss                 | 35 ++++++++++++++++++++++
 4 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/common/Loading.jsx b/resources/js/components/common/Loading.jsx
index b850dec..828c009 100644
--- a/resources/js/components/common/Loading.jsx
+++ b/resources/js/components/common/Loading.jsx
@@ -1,8 +1,15 @@
 import React from 'react';
 import { ProgressBar } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
 
-const Loading = () => <div className="loading">
-	<ProgressBar animated now={100} variant="info" />
-</div>;
+const Loading = () => {
+	const { t } = useTranslation();
+
+	return <div className="loading">
+		<div className="circle">
+			<span className="text">{t('general.loading')}</span>
+		</div>
+	</div>;
+};
 
 export default Loading;
diff --git a/resources/js/i18n/de.js b/resources/js/i18n/de.js
index a656acc..c05f87e 100644
--- a/resources/js/i18n/de.js
+++ b/resources/js/i18n/de.js
@@ -247,6 +247,7 @@ export default {
 				fr: 'Französisch',
 			},
 			loadError: 'Fehler beim Laden',
+			loading: 'Laden',
 			loadSuccess: 'Geladen',
 			pleaseSelect: 'Bitte wählen',
 			resetError: 'Fehler beim Zurücksetzen',
diff --git a/resources/js/i18n/en.js b/resources/js/i18n/en.js
index 9fe8dbc..08783ce 100644
--- a/resources/js/i18n/en.js
+++ b/resources/js/i18n/en.js
@@ -247,6 +247,7 @@ export default {
 				fr: 'French',
 			},
 			loadError: 'Error loading',
+			loading: 'Loading',
 			loadSuccess: 'Loading successful',
 			pleaseSelect: 'Please select',
 			resetError: 'Error resetting',
diff --git a/resources/sass/common.scss b/resources/sass/common.scss
index 1f73fb4..f81daa3 100644
--- a/resources/sass/common.scss
+++ b/resources/sass/common.scss
@@ -30,6 +30,41 @@ h1 {
 	}
 }
 
+@keyframes loading-pulse {
+	from {
+		box-shadow: 0 0 0 2em #aaa;
+	}
+	to {
+		box-shadow: 0 0 1em 4em #aaa;
+	}
+}
+
+.loading {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 80vh;
+	.circle {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		content: "";
+		background: #888;
+		width: min(30vw, 30vh);
+		height: min(30vw, 30vh);
+		border-radius: min(15vw, 15vh);
+		line-height: min(15vw, 15vh);
+		animation-name: loading-pulse;
+		animation-duration: 2s;
+		animation-iteration-count: infinite;
+		animation-direction: alternate;
+	}
+	.text {
+		font-size: min(4vw, 4vh);
+		min-font-size: 200%;
+	}
+}
+
 .modal-90w {
 	width: 90%;
 	max-width: none !important;
-- 
2.39.5