diff --git a/frontend-modern/src/components/Storage/Storage.tsx b/frontend-modern/src/components/Storage/Storage.tsx
index 0d3ec4d..0054968 100644
--- a/frontend-modern/src/components/Storage/Storage.tsx
+++ b/frontend-modern/src/components/Storage/Storage.tsx
@@ -22,7 +22,7 @@ type StorageSortKey = 'name' | 'node' | 'type' | 'status' | 'usage' | 'free' | '
const Storage: Component = () => {
const navigate = useNavigate();
- const { state, connected, activeAlerts, initialDataReceived } = useWebSocket();
+ const { state, connected, activeAlerts, initialDataReceived, reconnecting, reconnect } = useWebSocket();
const alertsActivation = useAlertsActivation();
const alertsEnabled = createMemo(() => alertsActivation.activationState() === 'active');
const [viewMode, setViewMode] = usePersistentSignal<'node' | 'storage'>(
@@ -660,6 +660,46 @@ const Storage: Component = () => {
+ {/* Disconnected State */}
+
+
+
+
+
+ }
+ title="Connection lost"
+ description={
+ reconnecting()
+ ? 'Attempting to reconnect…'
+ : 'Unable to connect to the backend server'
+ }
+ tone="danger"
+ actions={
+ !reconnecting() ? (
+
+ ) : undefined
+ }
+ />
+
+
+
{/* Helpful hint for no PVE nodes but still show content */}