adds stale and cache timer, fixes dark mode style being applied

src/components/include.scss

@@ -307,7 +307,7 @@ header {
 	}
 
 	a {
-		color: #0093e7; 
+		color: #0093e7;
 		text-decoration: none;
 
 		&:hover {
@@ -527,13 +527,13 @@ header {
 		height: 16px;
 		margin: 0 0.5em 0 0;
 		padding: 0;
-	
+
 		background-color: #fff;
 		border: 2px solid #7e7e7e;
 		border-radius: 4px;
-		
+
 		transition: all 0.3s;
-	
+
 		&:after {
 			content: '✓';
 			position: absolute;
@@ -575,13 +575,13 @@ header {
 		height: 16px;
 		margin: 0 0.5em 0 0;
 		padding: 0;
-	
+
 		background-color: #fff;
 		border: 2px solid #7e7e7e;
 		border-radius: 50%;
-		
+
 		transition: all 0.3s;
-	
+
 		&:after {
 			content: '';
 			position: absolute;
@@ -1092,7 +1092,7 @@ h1.logo {
 	}
 }
 
-.darkMode .page, .widget {
+.darkMode .page, .darkMode .widget {
 	.alert-wrapper {
 		background: rgba(0,0,0,0.66);
 
@@ -1240,4 +1240,4 @@ footer {
 
 .notif-error {
 	color: red;
-}
+}

src/components/widget-creator.jsx

@@ -168,11 +168,14 @@ const WidgetCreator = ({instId, widgetId, minHeight='', minWidth=''}) => {
 		queryKey: ['widget-lock', instance.id],
 		queryFn: () => apiGetWidgetLock(instance.id),
 		enabled: !!instance.id,
-		staleTime: Infinity,
+		staleTime: 2 * (60 * 1000),//2mins
+		cacheTime: 3 * (60 * 1000), // 3mins
 		retry: false,
 		onSuccess: (success) => {
 			if (!success) {
-				onInitFail('Someone else is editing this widget, you will be able to edit after they finish.')
+				onInitFail({
+					message: 'locked',
+				});
 			}
 		},
 		onError: (error) => {
@@ -720,6 +723,17 @@ const WidgetCreator = ({instId, widgetId, minHeight='', minWidth=''}) => {
 				...creatorState,
 				invalid: true
 			})
+		} else if (err.message == "locked") {
+			setCreatorState({
+				...creatorState,
+				invalid: true
+			})
+			setAlertDialog({ enabled: true,
+				title: 'Widget Locked',
+				message:'This widget is locked and cannot be modified until another collaborator is finished editing the widget. Please check again after a couple of minutes when the other collaborator has finished editing.',
+				fatal: true,
+				enableLoginButton: false
+			})
 		} else {
 			setAlertDialog(
 				{ enabled: true, title: err.message, msg: err.cause, fatal: err.halt, enableLoginButton: false }