[UI] Fix Background Tasks panel (#12899)

- Prevent visual flicker of "background worker not running"

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,18 +23,16 @@ const ScheduledTasksTable = Loadable(
   lazy(() => import('../../../../tables/settings/ScheduledTasksTable'))
 );
 
-export default function TaskManagementPanel() {
+function BackgroundWorkerStatus({
-  const { instance: taskInfo, refreshInstance: refreshTaskInfo } = useInstance({
+  isRunning
-    endpoint: ApiEndpoints.task_overview,
+}: {
-    hasPrimaryKey: false,
+  isRunning?: boolean;
-    refetchOnMount: true,
+}) {
-    defaultValue: {},
+  if (isRunning === null || isRunning === undefined) {
-    updateInterval: 30 * 1000
+    return <Skeleton animate />;
-  });
+  }
 
-  return (
+  return !!isRunning ? (
-    <>
-      {taskInfo?.is_running ? (
     <Alert
       title={t`Background worker running`}
       color='green'
@@ -42,7 +47,21 @@ export default function TaskManagementPanel() {
       <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,
+    hasPrimaryKey: false,
+    refetchOnMount: true,
+    defaultValue: {},
+    updateInterval: 30 * 1000
+  });
+
+  return (
+    <>
+      <BackgroundWorkerStatus isRunning={taskInfo?.is_running} />
       <Stack gap='xs'>
         <FactCollection
           items={[