improve modal loading in critical alert ui (#4679)

* critical alert ui

* updating ui, backend logic

* revert

* type check fix npm

* checking out cli files from main

* moving alert icon

* adding sqlx mock data

* more sqlx changes

* feat(frontend): nodes from flow can be connected directly in expr input through a plug icon (#4652)

* Add flow prop picker

# Conflicts:
#	frontend/src/lib/components/propertyPicker/PropPicker.svelte

* fix unwanted copy

* cleaning

* Fix unset context

* move button and always display input

* fix unwanted proppicker display

* update

* update

* clean all

* clean all

---------

Co-authored-by: Ruben Fiszel <ruben@rubenfiszel.com>

* replace hide/show with toggle

* adding mutable setting and navigation to settings to configure channels

* merge fix

* ee non ee changees

* auto-acknowledge when muted

* pr comments

* fix bad log

* user inner modal component

* update unaknowledge alerts after acknowledging from modal

* aknowledge -> acknowledge

* format

* immediately check for alerts

* immediately check for alerts

* simplify loading of superadmin/ee

* update modal logic

---------

Co-authored-by: Guilhem <guilhemlemouel@gmail.com>
Co-authored-by: Ruben Fiszel <ruben@rubenfiszel.com>
Co-authored-by: Ruben Fiszel <ruben@windmill.dev>

frontend/src/lib/components/sidebar/CriticalAlertModal.svelte

@@ -3,6 +3,7 @@
 	import CriticalAlertModalInner from './CriticalAlertModalInner.svelte'
 	import { SettingService } from '$lib/gen'
 	import { sendUserToast } from '$lib/toast'
+	import Modal from '../common/modal/Modal.svelte'
 
 	export let open: boolean = false
 	export let numUnacknowledgedCriticalAlerts: number = 0
@@ -66,4 +67,6 @@
 	}
 </script>
 
-<CriticalAlertModalInner bind:open {updateHasUnacknowledgedCriticalAlerts} />
+<Modal bind:open title="Critical Alerts" cancelText="Close" style="max-width: 66%;">
+	<CriticalAlertModalInner {updateHasUnacknowledgedCriticalAlerts} />
+</Modal>

frontend/src/lib/components/sidebar/CriticalAlertModalInner.svelte

@@ -1,34 +1,24 @@
 <script lang="ts">
-	import Modal from '../common/modal/Modal.svelte'
 	import Button from '../common/button/Button.svelte'
 	import Toggle from '$lib/components/Toggle.svelte'
 	import { SettingService } from '$lib/gen'
 	import { CheckCircle2, AlertCircle, RefreshCw, CheckSquare2, AlertTriangle } from 'lucide-svelte'
 	import type { CriticalAlert } from '$lib/gen'
-	import { onMount, beforeUpdate } from 'svelte'
+	import { onMount } from 'svelte'
 	import { instanceSettingsSelectedTab } from '$lib/stores'
 	import { goto } from '$app/navigation'
 
-	export let open: boolean = false
 	export let updateHasUnacknowledgedCriticalAlerts: () => void = () => {}
 
 	let alerts: CriticalAlert[] = []
 
 	let isRefreshing = false
-	let previousOpen = open
 	let hasCriticalAlertChannels = false
 
 	$: loading = isRefreshing
 
 	onMount(() => {
-		if (open) refreshAlerts()
-	})
-
-	beforeUpdate(() => {
-		if (open && !previousOpen) {
-			refreshAlerts()
-		}
-		previousOpen = open
+		refreshAlerts()
 	})
 
 	// Pagination
@@ -114,7 +104,7 @@
 	}
 </script>
 
-<Modal bind:open title="Critical Alerts" cancelText="Close" style="max-width: 66%;">
+<div>
 	{#if !hasCriticalAlertChannels}
 		<div class="flex flex-row pb-4">
 			<AlertTriangle color="orange" class="w-6 h-6 mr-2" />
@@ -210,4 +200,4 @@
 	{#if alerts.length === 0}
 		<p class="text-center text-gray-500 mt-4">No critical alerts available.</p>
 	{/if}
-</Modal>
+</div>