feat: backups page cleanup before worlds (#5844)

* feat: card alignment + fix modals

* feat: change admon title in restore alert modal

* fix: lint

* feat: backups queue api into api-client

* feat: impl backup queue api endpoints into frontend

* feat: ack fix

* feat: bulk actions

* feat: bulk delete impl

* fix: lint

* fix: align error states

* fix: transition group

* feat: ready for qa

* fix: lint

* feat: qa

* feat: stacked admonitions component

* fix: issues with stacking

* feat: hook up admonition stacking + fix app csp for staging kyros nodes

* fix: logs.vue

* qa: close stack on admonitions click

* fix: all problems with stacked admonitions

* qa: admonition cleanup and copy overhaul draft

* fix: qa issues padding

* fix: padding bug

* feat: qa

* fix: intercom in app csp bug

* fix: positioning intercom

* feat: loading overlay on top of console + admon consistency changes

* feat: scroll indicator fade in backup delete modal + admon timestamp fix

* feat: move action bar behind modal

* fix: lint + i18n

* fix: server ping spam on filter (cache but clear on unmount)

* fix: 1 admon fade in flicker issue

* chore: temp staging undo

* qa: changes

* fix: lint

* chore: revert staging to use staging

* fix: scoping

packages/ui/src/components/base/BaseTerminal.vue

@@ -4,6 +4,13 @@
 	>
 		<div ref="wrapperRef" class="relative min-h-0 flex-1 overflow-hidden pb-2 pt-1">
 			<div ref="containerRef" class="size-full" />
+			<Transition name="terminal-loading-fade">
+				<div
+					v-if="loading"
+					class="pointer-events-none absolute inset-0 z-20 animate-bpulse bg-surface-3"
+					aria-hidden="true"
+				/>
+			</Transition>
 			<div v-if="!isAtBottom" class="absolute bottom-4 right-4 z-10">
 				<ButtonStyled circular type="highlight" size="large">
 					<button class="!shadow-2xl" aria-label="Scroll to bottom" @click="scrollToBottom">
@@ -46,6 +53,7 @@ const props = withDefaults(
 		disableInput?: boolean
 		fullscreen?: boolean
 		emptyStateType?: 'server' | 'instance'
+		loading?: boolean
 	}>(),
 	{
 		scrollback: Infinity,
@@ -53,6 +61,7 @@ const props = withDefaults(
 		disableInput: false,
 		fullscreen: false,
 		emptyStateType: undefined,
+		loading: false,
 	},
 )
 
@@ -230,6 +239,15 @@ defineExpose({
 </script>
 
 <style>
+@keyframes bpulse {
+	50% {
+		filter: brightness(75%);
+	}
+}
+.animate-bpulse {
+	animation: bpulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
 .xterm {
 	height: 100% !important;
 }
@@ -269,4 +287,14 @@ defineExpose({
 	border-radius: 8px !important;
 	contain: layout style !important;
 }
+
+.terminal-loading-fade-enter-active,
+.terminal-loading-fade-leave-active {
+	transition: opacity 250ms ease-in-out;
+}
+
+.terminal-loading-fade-enter-from,
+.terminal-loading-fade-leave-to {
+	opacity: 0;
+}
 </style>