From fb0cc89fc3365868cc6e93f5b7103320c4afc414 Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Mon, 21 Sep 2026 15:03:20 +1000
Subject: [PATCH] [UI] Fix Background Tasks panel (#12899)

- Prevent visual flicker of "background worker not running"
---
 .../AdminCenter/TaskManagementPanel.tsx       | 53 +++++++++++++------
 1 file changed, 36 insertions(+), 17 deletions(-)

diff --git a/src/frontend/src/pages/Index/Settings/AdminCenter/TaskManagementPanel.tsx b/src/frontend/src/pages/Index/Settings/AdminCenter/TaskManagementPanel.tsx
index 9301694627..c5efa6e77d 100644
--- a/src/frontend/src/pages/Index/Settings/AdminCenter/TaskManagementPanel.tsx
+++ b/src/frontend/src/pages/Index/Settings/AdminCenter/TaskManagementPanel.tsx
@@ -1,5 +1,12 @@
 import { t } from '@lingui/core/macro';
-import { Accordion, Alert, Divider, Stack, Text } from '@mantine/core';
+import {
+  Accordion,
+  Alert,
+  Divider,
+  Skeleton,
+  Stack,
+  Text
+} from '@mantine/core';
 import { lazy } from 'react';
 
 import { StylishText } from '@lib/components/StylishText';
@@ -16,6 +23,33 @@ const ScheduledTasksTable = Loadable(
   lazy(() => import('../../../../tables/settings/ScheduledTasksTable'))
 );
 
+function BackgroundWorkerStatus({
+  isRunning
+}: {
+  isRunning?: boolean;
+}) {
+  if (isRunning === null || isRunning === undefined) {
+    return <Skeleton animate />;
+  }
+
+  return !!isRunning ? (
+    <Alert
+      title={t`Background worker running`}
+      color='green'
+      icon={<IconCircleCheck />}
+    />
+  ) : (
+    <Alert
+      title={t`Background worker not running`}
+      color='red'
+      icon={<IconExclamationCircle />}
+    >
+      <Text>{t`The background task manager service is not running. Contact your system administrator.`}</Text>
+      {errorCodeLink('INVE-W5')}
+    </Alert>
+  );
+}
+
 export default function TaskManagementPanel() {
   const { instance: taskInfo, refreshInstance: refreshTaskInfo } = useInstance({
     endpoint: ApiEndpoints.task_overview,
@@ -27,22 +61,7 @@ export default function TaskManagementPanel() {
 
   return (
     <>
-      {taskInfo?.is_running ? (
-        <Alert
-          title={t`Background worker running`}
-          color='green'
-          icon={<IconCircleCheck />}
-        />
-      ) : (
-        <Alert
-          title={t`Background worker not running`}
-          color='red'
-          icon={<IconExclamationCircle />}
-        >
-          <Text>{t`The background task manager service is not running. Contact your system administrator.`}</Text>
-          {errorCodeLink('INVE-W5')}
-        </Alert>
-      )}
+      <BackgroundWorkerStatus isRunning={taskInfo?.is_running} />
       <Stack gap='xs'>
         <FactCollection
           items={[