add CentredCogwhellLoader

src/index.tsx

@@ -6,7 +6,7 @@ import App from './App';
 import reportWebVitals from './reportWebVitals';
 import './services/i18n';
 import keycloakInstance from './services/keycloak-config';
-import CenterLoader from './shared/components/loaders/CenterLoader';
+import OverlayCogwheelLoader from './shared/components/loaders/OverlayCogwheelLoader';
 import RootStore from './shared/stores/root.store';
 import { isProduction } from './shared/env.const';
 import { ErrorBoundary } from 'react-error-boundary';
@@ -32,7 +32,7 @@ const tokenLogger = (tokens: any) => {
 root.render(
   <ReactKeycloakProvider
     authClient={keycloakInstance}
-    LoadingComponent={<CenterLoader />}
+    LoadingComponent={<OverlayCogwheelLoader />}
     onEvent={eventLogger}
     onTokens={tokenLogger}
     initOptions={{

src/pages/AccessSettingsPage.tsx

@@ -8,7 +8,7 @@ import { useAdminRole } from '../hooks/useAdminRole';
 import { frigateApi, frigateQueryKeys } from '../services/frigate.proxy/frigate.api';
 import CamerasTransferList from '../shared/components/CamerasTransferList';
 import RoleSelectFilter from '../shared/components/filters/RoleSelectFilter';
-import CenterLoader from '../shared/components/loaders/CenterLoader';
+import OverlayCogwheelLoader from '../shared/components/loaders/OverlayCogwheelLoader';
 import { dimensions } from '../shared/dimensions/dimensions';
 import { isProduction } from '../shared/env.const';
 import Forbidden from './403';
@@ -28,7 +28,7 @@ const AccessSettings = () => {
     const [roleId, setRoleId] = useState<string>()
 
 
-    if (isPending || adminLoading) return <CenterLoader />
+    if (isPending || adminLoading) return <OverlayCogwheelLoader />
     if (isError || adminError || !data) return <RetryErrorPage onRetry={refetch} />
     if (!isAdmin) return <Forbidden />
 

src/pages/EditCameraPage.tsx

@@ -9,7 +9,7 @@ import { useParams } from 'react-router-dom';
 import { useAdminRole } from '../hooks/useAdminRole';
 import { frigateApi, frigateQueryKeys, mapHostToHostname, proxyApi } from '../services/frigate.proxy/frigate.api';
 import MaskSelect, { MaskItem, MaskType } from '../shared/components/filters/MaskSelect';
-import CenterLoader from '../shared/components/loaders/CenterLoader';
+import OverlayCogwheelLoader from '../shared/components/loaders/OverlayCogwheelLoader';
 import { Point, extractMaskNumber } from '../shared/utils/maskPoint';
 import CameraMaskDrawer from '../widgets/CameraMaskDrawer';
 import CameraPageHeader from '../widgets/header/CameraPageHeader';
@@ -103,7 +103,7 @@ const EditCameraPage = () => {
 
     const { isAdmin, isLoading: adminLoading, isError: adminError } = useAdminRole()
 
-    if (isPending || adminLoading) return <CenterLoader />
+    if (isPending || adminLoading) return <OverlayCogwheelLoader />
     if (!isAdmin) return <Forbidden />
     if (isError || adminError) return <RetryErrorPage onRetry={refetch} />
 

src/pages/FrigateHostsPage.tsx

@@ -8,7 +8,7 @@ import { useTranslation } from 'react-i18next';
 import { useAdminRole } from '../hooks/useAdminRole';
 import { frigateApi, frigateQueryKeys } from '../services/frigate.proxy/frigate.api';
 import { GetFrigateHost, deleteFrigateHostSchema, putFrigateHostSchema } from '../services/frigate.proxy/frigate.schema';
-import CenterLoader from '../shared/components/loaders/CenterLoader';
+import OverlayCogwheelLoader from '../shared/components/loaders/OverlayCogwheelLoader';
 import { isProduction } from '../shared/env.const';
 import FrigateHostsTable from '../widgets/hosts.table/FrigateHostsTable';
 import Forbidden from './403';
@@ -88,7 +88,7 @@ const FrigateHostsPage = () => {
         if (data) setPageData([...data])
     }
 
-    if (hostsPending || adminLoading) return <CenterLoader />
+    if (hostsPending || adminLoading) return <OverlayCogwheelLoader />
     if (!isAdmin) return <Forbidden />
     if (hostsError || adminError) return <RetryErrorPage />
     if (!pageData) return <Text>Empty server response</Text>

src/pages/HostConfigPage.tsx

@@ -13,7 +13,7 @@ import { useLocation, useParams } from 'react-router-dom';
 import { useAdminRole } from '../hooks/useAdminRole';
 import { frigateApi, frigateQueryKeys, mapHostToHostname, proxyApi } from '../services/frigate.proxy/frigate.api';
 import { GetFrigateHost } from '../services/frigate.proxy/frigate.schema';
-import CenterLoader from '../shared/components/loaders/CenterLoader';
+import OverlayCogwheelLoader from '../shared/components/loaders/OverlayCogwheelLoader';
 import { isProduction } from '../shared/env.const';
 import { SaveOption } from '../types/saveConfig';
 import Forbidden from './403';
@@ -148,7 +148,7 @@ const HostConfigPage = () => {
       saveConfig({ saveOption: saveOption, config: editorRef.current.getValue() })
     }, [editorRef])
 
-  if (configPending || adminLoading) return <CenterLoader />
+  if (configPending || adminLoading) return <OverlayCogwheelLoader />
 
   if (configError) return <RetryErrorPage onRetry={refetch} />
   if (!isAdmin) return <Forbidden />

src/pages/HostSystemPage.tsx

@@ -8,7 +8,7 @@ import { useParams } from 'react-router-dom';
 import { useAdminRole } from '../hooks/useAdminRole';
 import { frigateApi, frigateQueryKeys, mapHostToHostname, proxyApi } from '../services/frigate.proxy/frigate.api';
 import { GetFrigateHost } from '../services/frigate.proxy/frigate.schema';
-import CenterLoader from '../shared/components/loaders/CenterLoader';
+import OverlayCogwheelLoader from '../shared/components/loaders/OverlayCogwheelLoader';
 import DetectorsStat from '../shared/components/stats/DetectorsStat';
 import GpuStat from '../shared/components/stats/GpuStat';
 import StorageRingStat from '../shared/components/stats/StorageRingStat';
@@ -72,7 +72,7 @@ const HostSystemPage = () => {
         });
     }, [data]);
 
-    if (isPending) return <CenterLoader />
+    if (isPending) return <OverlayCogwheelLoader />
     if (isError) return <RetryErrorPage onRetry={refetch} />
     if (!isAdmin) return <Forbidden />
     if (!paramHostId || !data) return null

src/pages/LiveCameraPage.tsx

@@ -4,7 +4,7 @@ import { observer } from 'mobx-react-lite';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 import { frigateApi, frigateQueryKeys } from '../services/frigate.proxy/frigate.api';
-import CenterLoader from '../shared/components/loaders/CenterLoader';
+import OverlayCogwheelLoader from '../shared/components/loaders/OverlayCogwheelLoader';
 import Player from '../widgets/Player';
 import CameraPageHeader from '../widgets/header/CameraPageHeader';
 import RetryErrorPage from './RetryErrorPage';
@@ -19,7 +19,7 @@ const LiveCameraPage = () => {
         queryFn: () => frigateApi.getCameraWHost(cameraId!)
     })
 
-    if (isPending) return <CenterLoader />
+    if (isPending) return <OverlayCogwheelLoader />
 
     if (isError) return <RetryErrorPage onRetry={refetch} />
 

src/pages/MainPage.tsx

@@ -12,6 +12,7 @@ import { useRealmUser } from '../hooks/useRealmUser';
 import { frigateApi, frigateQueryKeys } from '../services/frigate.proxy/frigate.api';
 import { GetCameraWHostWConfig } from '../services/frigate.proxy/frigate.schema';
 import ClearableTextInput from '../shared/components/inputs/ClearableTextInput';
+import CenteredCogwheelLoader from '../shared/components/loaders/CenteredCogwheelLoader';
 import CogwheelLoader from '../shared/components/loaders/CogwheelLoader';
 import { isProduction } from '../shared/env.const';
 import CameraCard from '../widgets/card/CameraCard';
@@ -122,7 +123,7 @@ const MainPage = () => {
         debouncedHandleSearchQuery(event.currentTarget.value)
     }
 
-    if (isLoading) return <CogwheelLoader />;
+    if (isLoading) return <CenteredCogwheelLoader />;
     if (isError) return <RetryErrorPage onRetry={refetch} />
     if (!isProduction) console.log('MainPage rendered')
 

src/pages/SettingsPage.tsx

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { useAdminRole } from '../hooks/useAdminRole';
 import { frigateApi, frigateQueryKeys } from '../services/frigate.proxy/frigate.api';
 import { GetRole } from '../services/frigate.proxy/frigate.schema';
-import CenterLoader from '../shared/components/loaders/CenterLoader';
+import OverlayCogwheelLoader from '../shared/components/loaders/OverlayCogwheelLoader';
 import { dimensions } from '../shared/dimensions/dimensions';
 import OIDPSettingsForm from '../widgets/OIDPSettingsForm';
 import RolesSettingsForm from '../widgets/RolesSettingsForm';
@@ -37,7 +37,7 @@ const SettingsPage = () => {
     }
 
     if (!isAdmin) return <Forbidden />
-    if (adminLoading) return <CenterLoader />
+    if (adminLoading) return <OverlayCogwheelLoader />
 
     return (
         <Flex h='100%'>

src/shared/components/AddBadge.tsx

@@ -1,9 +1,9 @@
-import { ActionIcon, Badge, Button, Menu, rem } from '@mantine/core';
+import { ActionIcon, Badge, Menu, rem } from '@mantine/core';
 import { IconPlus } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
 import React from 'react';
-import { frigateQueryKeys, frigateApi } from '../../services/frigate.proxy/frigate.api';
+import { frigateApi, frigateQueryKeys } from '../../services/frigate.proxy/frigate.api';
-import CogwheelLoader from './loaders/CogwheelLoader';
+import CenteredCogwheelLoader from './loaders/CenteredCogwheelLoader';
 import RetryError from './RetryError';
 
 interface AddBadgeProps {
@@ -24,7 +24,7 @@ const AddBadge: React.FC<AddBadgeProps> = ({
         if (onClick) onClick(tagId)
     }
 
-    if (isPending) return <CogwheelLoader />
+    if (isPending) return <CenteredCogwheelLoader />
     if (isError) return <RetryError onRetry={refetch} />
 
     if (!data || data.length < 1) return (

src/shared/components/CamerasTransferList.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { frigateApi, frigateQueryKeys } from '../../services/frigate.proxy/frigate.api';
 import { isProduction } from '../env.const';
 import RetryError from './RetryError';
-import CogwheelLoader from './loaders/CogwheelLoader';
+import CenteredCogwheelLoader from './loaders/CenteredCogwheelLoader';
 
 interface CamerasTransferListProps {
     roleId: string
@@ -48,7 +48,7 @@ const CamerasTransferList = ({
     }, [cameras])
 
 
-    if (isPending) return <CogwheelLoader />
+    if (isPending) return <CenteredCogwheelLoader />
     if (isError || !cameras) return <RetryError onRetry={refetch} />
     if (cameras.length < 1) return <Text> {t('camersDoesNotExist')}</Text>
 

src/shared/components/accordion/EventsAccordion.tsx

@@ -1,4 +1,4 @@
-import { Accordion, Center, Flex, Loader, Text } from '@mantine/core';
+import { Accordion, Flex, Text } from '@mantine/core';
 import { useQuery } from '@tanstack/react-query';
 import { observer } from 'mobx-react-lite';
 import { useContext, useState } from 'react';
@@ -7,9 +7,9 @@ import { Context } from '../../..';
 import { frigateQueryKeys, mapHostToHostname, proxyApi } from '../../../services/frigate.proxy/frigate.api';
 import { GetCameraWHostWConfig, GetFrigateHost, getEventsQuerySchema } from '../../../services/frigate.proxy/frigate.schema';
 import { getUnixTime } from '../../utils/dateUtil';
+import CenteredCogwheelLoader from '../loaders/CenteredCogwheelLoader';
 import RetryError from '../RetryError';
 import EventsAccordionItem from './EventsAccordionItem';
-import CogwheelLoader from '../loaders/CogwheelLoader';
 
 /**
  * @param day frigate format, e.g day: 2024-02-23
@@ -99,7 +99,7 @@ const EventsAccordion = ({
         }
     })
 
-    if (isPending) return <Flex w='100%' h='100%' direction='column' justify='center' align='center'><CogwheelLoader /></Flex>
+    if (isPending) return <CenteredCogwheelLoader />
     if (isError && retryCount >= MAX_RETRY_COUNT) {
         return (
             <Flex w='100%' h='100%' direction='column' justify='center' align='center'>

src/shared/components/filters/RoleSelectFilter.tsx

@@ -3,7 +3,7 @@ import { useQuery } from '@tanstack/react-query';
 import { useState } from 'react';
 import { frigateApi, frigateQueryKeys } from '../../../services/frigate.proxy/frigate.api';
 import RetryError from '../RetryError';
-import CogwheelLoader from '../loaders/CogwheelLoader';
+import CenteredCogwheelLoader from '../loaders/CenteredCogwheelLoader';
 import { OneSelectItem } from './OneSelectFilter';
 
 interface RoleSelectFilterProps extends Omit<SelectProps, 'data'> {
@@ -21,7 +21,7 @@ const RoleSelectFilter: React.FC<RoleSelectFilterProps> = ({
         queryFn: frigateApi.getRoles
     })
 
-    if (isPending) return <CogwheelLoader />
+    if (isPending) return <CenteredCogwheelLoader />
     if (isError || !data) return <RetryError onRetry={refetch} />
 
     const rolesSelect: OneSelectItem[] = data.map(role => ({ value: role.id, label: role.name }))

src/shared/components/filters/UserTagsFilter.tsx

@@ -1,16 +1,15 @@
 import { SelectItem } from '@mantine/core';
-import { t } from 'i18next';
-import { useEffect, useState } from 'react';
-import { z } from 'zod';
-import CreatableMultiSelect from './CreatableMultiSelect';
-import { useTranslation } from 'react-i18next';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { frigateApi, frigateQueryKeys } from '../../../services/frigate.proxy/frigate.api';
-import RetryError from '../RetryError';
-import CogwheelLoader from '../loaders/CogwheelLoader';
-import { mapUserTagsToSelectItems, PutUserTag } from '../../../types/tags';
 import { notifications } from '@mantine/notifications';
 import { IconAlertCircle } from '@tabler/icons-react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+import { frigateApi, frigateQueryKeys } from '../../../services/frigate.proxy/frigate.api';
+import { mapUserTagsToSelectItems, PutUserTag } from '../../../types/tags';
+import RetryError from '../RetryError';
+import CenteredCogwheelLoader from '../loaders/CenteredCogwheelLoader';
+import CreatableMultiSelect from './CreatableMultiSelect';
 
 
 interface UserTagsFilterProps {
@@ -133,7 +132,7 @@ const UserTagsFilter: React.FC<UserTagsFilterProps> = ({
         }
     }
 
-    if (isPending) return <CogwheelLoader />
+    if (isPending) return <CenteredCogwheelLoader />
     if (isError) return <RetryError onRetry={refetch} />
 
     const handleOnChange = (value: string[]) => {

src/shared/components/loaders/CenteredCogwheelLoader.tsx

@@ -0,0 +1,13 @@
+import { Flex } from '@mantine/core';
+import React from 'react';
+import CogwheelLoader from './CogwheelLoader';
+
+const CenteredCogwheelLoader = () => {
+    return (
+        <Flex w='100%' h='100%' direction='column' justify='center' align='center'>
+            <CogwheelLoader />
+        </Flex>
+    )
+};
+
+export default CenteredCogwheelLoader;

src/shared/components/loaders/OverlayCogwheelLoader.tsx

@@ -2,8 +2,8 @@ import { DEFAULT_THEME, Loader, LoadingOverlay } from '@mantine/core';
 import React from 'react';
 import СogwheelSVG from '../svg/CogwheelSVG';
 
-const CenterLoader = () => {
+const OverlayCogwheelLoader = () => {
     return <LoadingOverlay loader={СogwheelSVG} visible />;
 };
 
-export default CenterLoader;
+export default OverlayCogwheelLoader;

src/widgets/EventsBody.tsx

@@ -3,7 +3,7 @@ import { observer } from 'mobx-react-lite';
 import { FC } from 'react';
 import { frigateApi, frigateQueryKeys } from '../services/frigate.proxy/frigate.api';
 import EventsAccordion from '../shared/components/accordion/EventsAccordion';
-import CenterLoader from '../shared/components/loaders/CenterLoader';
+import OverlayCogwheelLoader from '../shared/components/loaders/OverlayCogwheelLoader';
 import RetryError from '../shared/components/RetryError';
 import { dayTimeToUnixTime } from '../shared/utils/dateUtil';
 
@@ -36,7 +36,7 @@ const EventsBody: FC<EventsBodyProps> = ({
         }
     })
 
-    if (isPending) return <CenterLoader />
+    if (isPending) return <OverlayCogwheelLoader />
     if (isError) return <RetryError onRetry={refetch} />
     if (!data) return null
 

src/widgets/OIDPSettingsForm.tsx

@@ -1,16 +1,16 @@
+import { Button, Flex } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
 import { IconAlertCircle, IconCircleCheck } from '@tabler/icons-react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { v4 } from 'uuid';
 import { frigateApi, frigateQueryKeys } from '../services/frigate.proxy/frigate.api';
 import { OIDPConfig } from '../services/frigate.proxy/frigate.schema';
 import RetryError from '../shared/components/RetryError';
 import { FloatingLabelInput } from '../shared/components/inputs/FloatingLabelInput';
-import CogwheelLoader from '../shared/components/loaders/CogwheelLoader';
+import CenteredCogwheelLoader from '../shared/components/loaders/CenteredCogwheelLoader';
-import { Flex, Button } from '@mantine/core';
 import { isProduction } from '../shared/env.const';
-import { useEffect, useState } from 'react';
 
 interface OIDPSettingsFormProps {
     isConfigValid?: (valid: boolean) => void
@@ -101,7 +101,7 @@ const OIDPSettingsForm: React.FC<OIDPSettingsFormProps> = ({
         if (data) setConfig(data)
     }
 
-    if (isPending) return <CogwheelLoader />
+    if (isPending) return <CenteredCogwheelLoader />
     if (isError) return <RetryError onRetry={refetch} />
 
     return (

src/widgets/RolesSettingsForm.tsx

@@ -1,16 +1,16 @@
+import { Button, Flex, Text } from '@mantine/core';
+import { notifications } from '@mantine/notifications';
+import { IconAlertCircle, IconCircleCheck } from '@tabler/icons-react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { v4 } from 'uuid';
 import { frigateApi, frigateQueryKeys } from '../services/frigate.proxy/frigate.api';
+import { GetRole } from '../services/frigate.proxy/frigate.schema';
 import RetryError from '../shared/components/RetryError';
 import RoleSelectFilter from '../shared/components/filters/RoleSelectFilter';
-import CogwheelLoader from '../shared/components/loaders/CogwheelLoader';
+import CenteredCogwheelLoader from '../shared/components/loaders/CenteredCogwheelLoader';
-import { GetRole } from '../services/frigate.proxy/frigate.schema';
 import { isProduction } from '../shared/env.const';
-import { Flex, Button, Text } from '@mantine/core';
-import { notifications } from '@mantine/notifications';
-import { IconCircleCheck, IconAlertCircle } from '@tabler/icons-react';
-import { v4 } from 'uuid';
 
 interface Roles {
     adminRole?: {
@@ -174,7 +174,7 @@ const RolesSettingsForm: React.FC<RolesSettingsFormProps> = ({
         if (!isProduction) console.log('Roles:', roles)
     }, [roles])
 
-    if (isPending) return <CogwheelLoader />
+    if (isPending) return <CenteredCogwheelLoader />
     if (isError) return <RetryError onRetry={refetch} />
     if (allRoles.length < 1) return (
         <>

src/widgets/SelectedCameraList.tsx

@@ -1,12 +1,12 @@
 import { Flex, Text } from '@mantine/core';
-import React, { Suspense, useContext } from 'react';
-import CameraAccordion from '../shared/components/accordion/CameraAccordion';
 import { useQuery } from '@tanstack/react-query';
-import { Context } from '..';
-import { frigateQueryKeys, frigateApi } from '../services/frigate.proxy/frigate.api';
-import RetryErrorPage from '../pages/RetryErrorPage';
-import CenterLoader from '../shared/components/loaders/CenterLoader';
 import { observer } from 'mobx-react-lite';
+import { Suspense, useContext } from 'react';
+import { Context } from '..';
+import RetryErrorPage from '../pages/RetryErrorPage';
+import { frigateApi, frigateQueryKeys } from '../services/frigate.proxy/frigate.api';
+import CameraAccordion from '../shared/components/accordion/CameraAccordion';
+import CenteredCogwheelLoader from '../shared/components/loaders/CenteredCogwheelLoader';
 
 
 const SelectedCameraList = () => {
@@ -27,7 +27,7 @@ const SelectedCameraList = () => {
         cameraRefetch()
     }
 
-    if (cameraPending) return <CenterLoader />
+    if (cameraPending) return <CenteredCogwheelLoader />
     if (cameraError) return <RetryErrorPage onRetry={handleRetry} />
 
     if (!camera || !camera?.frigateHost) return null

src/widgets/SelectedDayList.tsx

@@ -1,15 +1,15 @@
-import { useQuery } from '@tanstack/react-query';
-import React, { useContext, useState } from 'react';
-import { frigateQueryKeys, mapHostToHostname, proxyApi } from '../services/frigate.proxy/frigate.api';
-import { dateToQueryString, getResolvedTimeZone } from '../shared/utils/dateUtil';
-import { Context } from '..';
 import { Center, Flex, Text } from '@mantine/core';
-import RetryErrorPage from '../pages/RetryErrorPage';
+import { useQuery } from '@tanstack/react-query';
-import CenterLoader from '../shared/components/loaders/CenterLoader';
 import { observer } from 'mobx-react-lite';
-import DayAccordion from '../shared/components/accordion/DayAccordion';
+import { useContext, useState } from 'react';
-import { isProduction } from '../shared/env.const';
 import { useTranslation } from 'react-i18next';
+import { Context } from '..';
+import RetryErrorPage from '../pages/RetryErrorPage';
+import { frigateQueryKeys, mapHostToHostname, proxyApi } from '../services/frigate.proxy/frigate.api';
+import DayAccordion from '../shared/components/accordion/DayAccordion';
+import CenteredCogwheelLoader from '../shared/components/loaders/CenteredCogwheelLoader';
+import { isProduction } from '../shared/env.const';
+import { dateToQueryString, getResolvedTimeZone } from '../shared/utils/dateUtil';
 
 interface SelectedDayListProps {
     day: Date
@@ -52,7 +52,7 @@ const SelectedDayList = ({
         if (recStore.filteredHost) refetch()
     }
 
-    if (isPending) return <CenterLoader />
+    if (isPending) return <CenteredCogwheelLoader />
 
     if (isError && retryCount >= MAX_RETRY_COUNT) {
         return (

src/widgets/SelectedHostList.tsx

@@ -1,12 +1,12 @@
 import { Accordion, Flex, Text } from '@mantine/core';
-import React, { Suspense, lazy, useContext, useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
-import { frigateQueryKeys, frigateApi } from '../services/frigate.proxy/frigate.api';
-import { Context } from '..';
-import CenterLoader from '../shared/components/loaders/CenterLoader';
-import RetryErrorPage from '../pages/RetryErrorPage';
 import { observer } from 'mobx-react-lite';
+import { Suspense, lazy, useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Context } from '..';
+import RetryErrorPage from '../pages/RetryErrorPage';
+import { frigateApi, frigateQueryKeys } from '../services/frigate.proxy/frigate.api';
+import CenteredCogwheelLoader from '../shared/components/loaders/CenteredCogwheelLoader';
 const CameraAccordion = lazy(() => import('../shared/components/accordion/CameraAccordion'));
 
 interface SelectedHostListProps {
@@ -38,7 +38,7 @@ const SelectedHostList = ({
         if (recStore.filteredHost) hostRefetch()
     }
 
-    if (hostPending) return <CenterLoader />
+    if (hostPending) return <CenteredCogwheelLoader />
     if (hostError) return <RetryErrorPage onRetry={handleRetry} />
 
     if (!camerasQuery || camerasQuery.length < 1) return null

src/widgets/camera.stat.table/FrigateStorageStateTable.tsx

@@ -1,16 +1,16 @@
+import { Center, Table, Text } from '@mantine/core';
 import { useQuery } from '@tanstack/react-query';
 import React, { useCallback, useEffect, useState } from 'react';
-import { frigateQueryKeys, mapHostToHostname, proxyApi } from '../../services/frigate.proxy/frigate.api';
-import { GetFrigateHost } from '../../services/frigate.proxy/frigate.schema';
-import CogwheelLoader from '../../shared/components/loaders/CogwheelLoader';
-import RetryError from '../../shared/components/RetryError';
-import { Center, Flex, Table, Text } from '@mantine/core';
-import { TableHead } from '../../types/table';
-import SortedTh from '../../shared/components/table.aps/SortedTh';
 import { useTranslation } from 'react-i18next';
 import { v4 as uuidv4 } from 'uuid';
-import { sortByKey } from '../../shared/utils/sort.array';
+import { frigateQueryKeys, mapHostToHostname, proxyApi } from '../../services/frigate.proxy/frigate.api';
+import { GetFrigateHost } from '../../services/frigate.proxy/frigate.schema';
+import CenteredCogwheelLoader from '../../shared/components/loaders/CenteredCogwheelLoader';
+import RetryError from '../../shared/components/RetryError';
+import SortedTh from '../../shared/components/table.aps/SortedTh';
 import { formatMBytes } from '../../shared/utils/data.size';
+import { sortByKey } from '../../shared/utils/sort.array';
+import { TableHead } from '../../types/table';
 
 
 export interface StorageItem {
@@ -69,7 +69,7 @@ const FrigateStorageStateTable: React.FC<TableProps> = ({
         setSortedName(headName)
     }
 
-    if (isPending) return <CogwheelLoader />
+    if (isPending) return <CenteredCogwheelLoader />
     if (isError) return <RetryError onRetry={refetch} />
     if (!tableData ) return <Center><Text>{t('errors.emptyResponse')}</Text></Center>