From c240eb4a4ea47af9f827ea41463732e9ded7b832 Mon Sep 17 00:00:00 2001
From: chfhtw <christopher.hacker@technikum-wien.at>
Date: Tue, 14 Apr 2026 11:30:13 +0200
Subject: [PATCH] move loading animation inside component root element

---
 public/js/components/Dashboard/Item.js | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/public/js/components/Dashboard/Item.js b/public/js/components/Dashboard/Item.js
index 0df0023dd..94ee0bbef 100644
--- a/public/js/components/Dashboard/Item.js
+++ b/public/js/components/Dashboard/Item.js
@@ -39,7 +39,7 @@ export default {
 		"custom",
 		"hidden",
 		"editMode",
-		"loading",
+		"loading", // widget got added and is waiting for backend to save in db
 		"item_data",
 		"place",
 		"widgetTemplate",
@@ -176,18 +176,16 @@ export default {
 		this.tmpConfig = { ...this.arguments };
 	},
 	template: /*html*/ `
-	<div v-if="loading">
-		<div class="d-flex justify-content-center align-items-center h-100">
-			<i class="fa-solid fa-spinner fa-pulse fa-3x"></i>
-		</div>
-	</div>
 	<div
-		v-else-if="!hidden || editMode"
+		v-if="!hidden || editMode"
 		:id="widgetID"
 		class="dashboard-item card overflow-hidden h-100 position-relative"
 		:class="{'hidden-widget':hidden, 'dashboard-item-overlay':resizeOverlay, [arguments?.className]:arguments && arguments.className}"
 	>
-		<div class="h-100 card border-0">
+		<div v-if="loading" class="d-flex justify-content-center align-items-center h-100">
+			<i class="fa-solid fa-spinner fa-pulse fa-3x"></i>
+		</div>
+		<div v-else class="h-100 card border-0">
 			<div v-if="widgetTemplate" class="card-header d-flex ps-0 pe-2 align-items-center">
 				<Transition>
 					<span