feat(frontend): reduce flickering on reload (#9897)

* rename states to better fit naming conv

* fix name

* ensure splashscreen only loads after login check
this reduces a short splash of the splashscreen even if logged in

* move loader to the middle of the screen and remove fallback on a view screens

src/frontend/lib/types/User.tsx

@@ -59,4 +59,7 @@ export interface UserStateProps {
   isLoggedIn: () => boolean;
   isStaff: () => boolean;
   isSuperuser: () => boolean;
+  // login state
+  login_checked: boolean;
+  setLoginChecked: (value: boolean) => void;
 }

src/frontend/src/components/SplashScreen.tsx

@@ -2,7 +2,8 @@ import { BackgroundImage } from '@mantine/core';
 import { useEffect } from 'react';
 import { useShallow } from 'zustand/react/shallow';
 import { generateUrl } from '../functions/urls';
-import { useServerApiState } from '../states/ApiState';
+import { useServerApiState } from '../states/ServerApiState';
+import { useUserState } from '../states/UserState';
 
 /**
  * Render content within a "splash screen" container.
@@ -15,6 +16,9 @@ export default function SplashScreen({
   const [server, fetchServerApiState] = useServerApiState(
     useShallow((state) => [state.server, state.fetchServerApiState])
   );
+  const [checked_login] = useUserState(
+    useShallow((state) => [state.login_checked])
+  );
 
   // Fetch server data on mount if no server data is present
   useEffect(() => {
@@ -23,7 +27,7 @@ export default function SplashScreen({
     }
   }, [server]);
 
-  if (server.customize?.splash) {
+  if (server.customize?.splash && checked_login) {
     return (
       <BackgroundImage src={generateUrl(server.customize.splash)}>
         {children}

src/frontend/src/components/barcodes/BarcodeInput.tsx

@@ -14,7 +14,7 @@ import { IconCamera, IconScan } from '@tabler/icons-react';
 import { useCallback, useMemo, useState } from 'react';
 
 import { useLocalStorage } from '@mantine/hooks';
-import { useGlobalSettingsState } from '../../states/SettingsState';
+import { useGlobalSettingsState } from '../../states/SettingsStates';
 import { Boundary } from '../Boundary';
 import BarcodeCameraInput from './BarcodeCameraInput';
 import BarcodeKeyboardInput from './BarcodeKeyboardInput';

src/frontend/src/components/barcodes/QRCode.tsx

@@ -21,7 +21,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { apiUrl } from '@lib/functions/Api';
 import { api } from '../../App';
-import { useGlobalSettingsState } from '../../states/SettingsState';
+import { useGlobalSettingsState } from '../../states/SettingsStates';
 import { CopyButton } from '../buttons/CopyButton';
 import type { QrCodeType } from '../items/ActionDropdown';
 

src/frontend/src/components/buttons/AdminButton.tsx

@@ -6,7 +6,7 @@ import { ModelInformationDict } from '@lib/enums/ModelInformation';
 import type { ModelType } from '@lib/enums/ModelType';
 import { eventModified } from '@lib/functions/Navigation';
 import { generateUrl } from '../../functions/urls';
-import { useServerApiState } from '../../states/ApiState';
+import { useServerApiState } from '../../states/ServerApiState';
 import { useUserState } from '../../states/UserState';
 import { ActionButton } from './ActionButton';
 

src/frontend/src/components/buttons/PrintingActions.tsx

@@ -13,7 +13,7 @@ import { useCreateApiFormModal } from '../../hooks/UseForm';
 import {
   useGlobalSettingsState,
   useUserSettingsState
-} from '../../states/SettingsState';
+} from '../../states/SettingsStates';
 import { ActionDropdown } from '../items/ActionDropdown';
 
 export function PrintingActions({

src/frontend/src/components/dashboard/DashboardWidgetLibrary.tsx

@@ -1,7 +1,7 @@
 import { t } from '@lingui/core/macro';
 
 import { ModelType } from '@lib/enums/ModelType';
-import { useGlobalSettingsState } from '../../states/SettingsState';
+import { useGlobalSettingsState } from '../../states/SettingsStates';
 import type { DashboardWidgetProps } from './DashboardWidget';
 import ColorToggleDashboardWidget from './widgets/ColorToggleWidget';
 import GetStartedWidget from './widgets/GetStartedWidget';

src/frontend/src/components/details/Details.tsx

@@ -26,7 +26,7 @@ import type { InvenTreeIconType } from '@lib/types/Icons';
 import { useApi } from '../../contexts/ApiContext';
 import { formatDate, formatDecimal } from '../../defaults/formatters';
 import { InvenTreeIcon } from '../../functions/icons';
-import { useGlobalSettingsState } from '../../states/SettingsState';
+import { useGlobalSettingsState } from '../../states/SettingsStates';
 import { CopyButton } from '../buttons/CopyButton';
 import { YesNoButton } from '../buttons/YesNoButton';
 import { ProgressBar } from '../items/ProgressBar';

src/frontend/src/components/details/DetailsImage.tsx

@@ -28,7 +28,7 @@ import { api } from '../../App';
 import { InvenTreeIcon } from '../../functions/icons';
 import { showApiErrorMessage } from '../../functions/notifications';
 import { useEditApiFormModal } from '../../hooks/UseForm';
-import { useGlobalSettingsState } from '../../states/SettingsState';
+import { useGlobalSettingsState } from '../../states/SettingsStates';
 import { useUserState } from '../../states/UserState';
 import { PartThumbTable } from '../../tables/part/PartThumbTable';
 import { vars } from '../../theme';

src/frontend/src/components/forms/AuthFormOptions.tsx

@@ -2,7 +2,7 @@ import { ActionIcon, Center, Group, Text, Tooltip } from '@mantine/core';
 import { IconServer } from '@tabler/icons-react';
 
 import { useShallow } from 'zustand/react/shallow';
-import { useServerApiState } from '../../states/ApiState';
+import { useServerApiState } from '../../states/ServerApiState';
 import { ColorToggle } from '../items/ColorToggle';
 import { LanguageToggle } from '../items/LanguageToggle';
 

src/frontend/src/components/forms/AuthenticationForm.tsx

@@ -27,7 +27,7 @@ import {
   followRedirect
 } from '../../functions/auth';
 import { showLoginNotification } from '../../functions/notifications';
-import { useServerApiState } from '../../states/ApiState';
+import { useServerApiState } from '../../states/ServerApiState';
 import { useUserState } from '../../states/UserState';
 import { SsoButton } from '../buttons/SSOButton';
 

src/frontend/src/components/forms/InstanceOptions.tsx

@@ -23,8 +23,8 @@ import {
 import type { HostList } from '@lib/types/Server';
 import { useShallow } from 'zustand/react/shallow';
 import { Wrapper } from '../../pages/Auth/Layout';
-import { useServerApiState } from '../../states/ApiState';
 import { useLocalState } from '../../states/LocalState';
+import { useServerApiState } from '../../states/ServerApiState';
 import { ActionButton } from '../buttons/ActionButton';
 import { HostOptionsForm } from './HostOptionsForm';
 

src/frontend/src/components/modals/AboutInvenTreeModal.tsx

@@ -19,7 +19,7 @@ import { apiUrl } from '@lib/functions/Api';
 import { useShallow } from 'zustand/react/shallow';
 import { api } from '../../App';
 import { generateUrl } from '../../functions/urls';
-import { useServerApiState } from '../../states/ApiState';
+import { useServerApiState } from '../../states/ServerApiState';
 import { useUserState } from '../../states/UserState';
 import { CopyButton } from '../buttons/CopyButton';
 import { StylishText } from '../items/StylishText';

src/frontend/src/components/modals/ServerInfoModal.tsx

@@ -3,7 +3,7 @@ import { Badge, Button, Divider, Group, Stack, Table } from '@mantine/core';
 import type { ContextModalProps } from '@mantine/modals';
 
 import { useShallow } from 'zustand/react/shallow';
-import { useServerApiState } from '../../states/ApiState';
+import { useServerApiState } from '../../states/ServerApiState';
 import { OnlyStaff } from '../items/OnlyStaff';
 
 export function ServerInfoModal({

src/frontend/src/components/nav/Alerts.tsx

@@ -5,8 +5,8 @@ import { useMemo, useState } from 'react';
 import { t } from '@lingui/core/macro';
 import { useShallow } from 'zustand/react/shallow';
 import { docLinks } from '../../defaults/links';
-import { useServerApiState } from '../../states/ApiState';
+import { useServerApiState } from '../../states/ServerApiState';
-import { useGlobalSettingsState } from '../../states/SettingsState';
+import { useGlobalSettingsState } from '../../states/SettingsStates';
 import { useUserState } from '../../states/UserState';
 
 interface AlertInfo {

src/frontend/src/components/nav/Header.tsx

@@ -26,12 +26,12 @@ import { getNavTabs } from '../../defaults/links';
 import { generateUrl } from '../../functions/urls';
 import { usePluginUIFeature } from '../../hooks/UsePluginUIFeature';
 import * as classes from '../../main.css';
-import { useServerApiState } from '../../states/ApiState';
 import { useLocalState } from '../../states/LocalState';
+import { useServerApiState } from '../../states/ServerApiState';
 import {
   useGlobalSettingsState,
   useUserSettingsState
-} from '../../states/SettingsState';
+} from '../../states/SettingsStates';
 import { useUserState } from '../../states/UserState';
 import { ScanButton } from '../buttons/ScanButton';
 import { SpotlightButton } from '../buttons/SpotlightButton';

src/frontend/src/components/nav/NavigationDrawer.tsx

@@ -15,7 +15,7 @@ import { UserRoles } from '@lib/enums/Roles';
 import { AboutLinks, DocumentationLinks } from '../../defaults/links';
 import useInstanceName from '../../hooks/UseInstanceName';
 import * as classes from '../../main.css';
-import { useGlobalSettingsState } from '../../states/SettingsState';
+import { useGlobalSettingsState } from '../../states/SettingsStates';
 import { useUserState } from '../../states/UserState';
 import { InvenTreeLogo } from '../items/InvenTreeLogo';
 import { type MenuLinkItem, MenuLinks } from '../items/MenuLinks';

src/frontend/src/components/nav/PageDetail.tsx

@@ -3,7 +3,7 @@ import { useHotkeys } from '@mantine/hooks';
 
 import { Fragment, type ReactNode, useMemo } from 'react';
 import { shortenString } from '../../functions/tables';
-import { useUserSettingsState } from '../../states/SettingsState';
+import { useUserSettingsState } from '../../states/SettingsStates';
 import { ApiImage } from '../images/ApiImage';
 import { StylishText } from '../items/StylishText';
 import { type Breadcrumb, BreadcrumbList } from './BreadcrumbList';

src/frontend/src/components/nav/PageTitle.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo } from 'react';
-import { useGlobalSettingsState } from '../../states/SettingsState';
+import { useGlobalSettingsState } from '../../states/SettingsStates';
 
 /**
  * Component to set the page title

src/frontend/src/components/nav/SearchDrawer.tsx

@@ -41,7 +41,7 @@ import { cancelEvent } from '@lib/functions/Events';
 import { eventModified, navigateToLink } from '@lib/functions/Navigation';
 import { showNotification } from '@mantine/notifications';
 import { api } from '../../App';
-import { useUserSettingsState } from '../../states/SettingsState';
+import { useUserSettingsState } from '../../states/SettingsStates';
 import { useUserState } from '../../states/UserState';
 import { Boundary } from '../Boundary';
 import { RenderInstance } from '../render/Instance';

src/frontend/src/components/plugins/PluginContext.tsx

@@ -7,7 +7,7 @@ import { useLocalState } from '../../states/LocalState';
 import {
   useGlobalSettingsState,
   useUserSettingsState
-} from '../../states/SettingsState';
+} from '../../states/SettingsStates';
 import { useUserState } from '../../states/UserState';
 
 import { ModelInformationDict } from '@lib/enums/ModelInformation';

src/frontend/src/components/render/StatusRenderer.tsx

@@ -3,7 +3,7 @@ import { Badge, Center, type MantineSize } from '@mantine/core';
 import type { ModelType } from '@lib/enums/ModelType';
 import { statusColorMap } from '../../defaults/backendMappings';
 import { resolveItem } from '../../functions/conversion';
-import { useGlobalStatusState } from '../../states/StatusState';
+import { useGlobalStatusState } from '../../states/GlobalStatusState';
 
 export interface StatusCodeInterface {
   key: number;

src/frontend/src/components/settings/SettingList.tsx

@@ -16,7 +16,7 @@ import {
   createPluginSettingsState,
   useGlobalSettingsState,
   useUserSettingsState
-} from '../../states/SettingsState';
+} from '../../states/SettingsStates';
 import { SettingItem } from './SettingItem';
 
 /**

src/frontend/src/contexts/LanguageContext.tsx

@@ -6,8 +6,8 @@ import { type JSX, useEffect, useRef, useState } from 'react';
 
 import { useShallow } from 'zustand/react/shallow';
 import { api } from '../App';
-import { useServerApiState } from '../states/ApiState';
 import { useLocalState } from '../states/LocalState';
+import { useServerApiState } from '../states/ServerApiState';
 import { fetchGlobalStates } from '../states/states';
 
 export const defaultLocale = 'en';

src/frontend/src/defaults/formatters.tsx

@@ -3,7 +3,7 @@ import dayjs from 'dayjs';
 import {
   useGlobalSettingsState,
   useUserSettingsState
-} from '../states/SettingsState';
+} from '../states/SettingsStates';
 
 interface FormatDecmimalOptionsInterface {
   digits?: number;

src/frontend/src/forms/BuildForms.tsx

@@ -29,7 +29,7 @@ import {
   useBatchCodeGenerator,
   useSerialNumberGenerator
 } from '../hooks/UseGenerator';
-import { useGlobalSettingsState } from '../states/SettingsState';
+import { useGlobalSettingsState } from '../states/SettingsStates';
 import { PartColumn } from '../tables/ColumnRenderers';
 
 /**

src/frontend/src/forms/CommonForms.tsx

@@ -6,7 +6,7 @@ import type {
   StatusCodeInterface,
   StatusCodeListInterface
 } from '../components/render/StatusRenderer';
-import { useGlobalStatusState } from '../states/StatusState';
+import { useGlobalStatusState } from '../states/GlobalStatusState';
 
 export function projectCodeFields(): ApiFormFieldSet {
   return {

src/frontend/src/forms/PartForms.tsx

@@ -6,7 +6,7 @@ import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { apiUrl } from '@lib/functions/Api';
 import type { ApiFormFieldSet } from '@lib/types/Forms';
 import { useApi } from '../contexts/ApiContext';
-import { useGlobalSettingsState } from '../states/SettingsState';
+import { useGlobalSettingsState } from '../states/SettingsStates';
 
 /**
  * Construct a set of fields for creating / editing a Part instance

src/frontend/src/forms/PurchaseOrderForms.tsx

@@ -51,7 +51,7 @@ import {
   useBatchCodeGenerator,
   useSerialNumberGenerator
 } from '../hooks/UseGenerator';
-import { useGlobalSettingsState } from '../states/SettingsState';
+import { useGlobalSettingsState } from '../states/SettingsStates';
 /*
  * Construct a set of fields for creating / editing a PurchaseOrderLineItem instance
  */

src/frontend/src/forms/ReturnOrderForms.tsx

@@ -21,7 +21,7 @@ import type {
 import type { TableFieldRowProps } from '../components/forms/fields/TableField';
 import { Thumbnail } from '../components/images/Thumbnail';
 import { useCreateApiFormModal } from '../hooks/UseForm';
-import { useGlobalSettingsState } from '../states/SettingsState';
+import { useGlobalSettingsState } from '../states/SettingsStates';
 import { StatusFilterOptions } from '../tables/Filter';
 
 export function useReturnOrderFields({

src/frontend/src/forms/SalesOrderForms.tsx

@@ -22,7 +22,7 @@ import type {
 import type { TableFieldRowProps } from '../components/forms/fields/TableField';
 import { ProgressBar } from '../components/items/ProgressBar';
 import { useCreateApiFormModal } from '../hooks/UseForm';
-import { useGlobalSettingsState } from '../states/SettingsState';
+import { useGlobalSettingsState } from '../states/SettingsStates';
 import { PartColumn } from '../tables/ColumnRenderers';
 
 export function useSalesOrderFields({

src/frontend/src/forms/StockForms.tsx

@@ -56,7 +56,7 @@ import {
   useBatchCodeGenerator,
   useSerialNumberGenerator
 } from '../hooks/UseGenerator';
-import { useGlobalSettingsState } from '../states/SettingsState';
+import { useGlobalSettingsState } from '../states/SettingsStates';
 import { StatusFilterOptions } from '../tables/Filter';
 
 /**

src/frontend/src/functions/auth.tsx

@@ -7,8 +7,8 @@ import axios from 'axios';
 import type { AxiosRequestConfig } from 'axios';
 import type { Location, NavigateFunction } from 'react-router-dom';
 import { api, setApiDefaults } from '../App';
-import { useServerApiState } from '../states/ApiState';
 import { useLocalState } from '../states/LocalState';
+import { useServerApiState } from '../states/ServerApiState';
 import { useUserState } from '../states/UserState';
 import { fetchGlobalStates } from '../states/states';
 import { showLoginNotification } from './notifications';
@@ -354,6 +354,7 @@ export const checkLoginState = async (
   redirect?: any,
   no_redirect?: boolean
 ) => {
+  const { setLoginChecked } = useUserState.getState();
   setApiDefaults();
 
   if (redirect == '/') {
@@ -364,6 +365,7 @@ export const checkLoginState = async (
 
   // Callback function when login is successful
   const loginSuccess = () => {
+    setLoginChecked(true);
     showLoginNotification({
       title: t`Logged In`,
       message: t`Successfully logged in`
@@ -388,8 +390,10 @@ export const checkLoginState = async (
   if (isLoggedIn()) {
     loginSuccess();
   } else if (!no_redirect) {
+    setLoginChecked(true);
     navigate('/login', { state: redirect });
   }
+  setLoginChecked(true);
 };
 
 function handleSuccessFullAuth(

src/frontend/src/functions/loading.tsx

@@ -4,11 +4,13 @@ import { type JSX, Suspense } from 'react';
 import { colorSchema } from '../contexts/colorSchema';
 import { theme } from '../theme';
 
-function LoadingFallback() {
+function LoadingFallback({
+  fullHeight = false
+}: { fullHeight: boolean }): JSX.Element {
   return (
     <MantineProvider theme={theme} colorSchemeManager={colorSchema}>
-      <Stack>
+      <Stack h={fullHeight ? '100vh' : undefined}>
-        <Center>
+        <Center h={fullHeight ? '100vh' : undefined}>
           <Loader />
         </Center>
       </Stack>
@@ -16,12 +18,21 @@ function LoadingFallback() {
   );
 }
 
-export const Loadable =
+export function Loadable(
-  (Component: any) => (props: JSX.IntrinsicAttributes) => (
+  Component: any,
-    <Suspense fallback={<LoadingFallback />}>
+  noFallback = false,
+  fullHeight = false
+): any {
+  return (props: JSX.IntrinsicAttributes) => (
+    <Suspense
+      fallback={
+        !noFallback ? <LoadingFallback fullHeight={fullHeight} /> : undefined
+      }
+    >
       <Component {...props} />
     </Suspense>
   );
+}
 
 export function LoadingItem({ item }: Readonly<{ item: any }>): JSX.Element {
   const Itm = Loadable(item);

src/frontend/src/hooks/UseDashboardItems.tsx

@@ -13,7 +13,7 @@ import {
 } from '../components/plugins/PluginUIFeature';
 import RemoteComponent from '../components/plugins/RemoteComponent';
 import { identifierString } from '../functions/conversion';
-import { useGlobalSettingsState } from '../states/SettingsState';
+import { useGlobalSettingsState } from '../states/SettingsStates';
 import { useUserState } from '../states/UserState';
 
 interface DashboardLibraryProps {

src/frontend/src/hooks/UseInstanceName.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 
-import { useGlobalSettingsState } from '../states/SettingsState';
+import { useGlobalSettingsState } from '../states/SettingsStates';
 
 /**
  * Simple hook for returning the "instance name" of the Server

src/frontend/src/hooks/UsePluginPanels.tsx

@@ -14,7 +14,7 @@ import {
   type PluginUIFeature,
   PluginUIFeatureType
 } from '../components/plugins/PluginUIFeature';
-import { useGlobalSettingsState } from '../states/SettingsState';
+import { useGlobalSettingsState } from '../states/SettingsStates';
 
 /**
  * Type definition for a plugin panel which extends the standard PanelType

src/frontend/src/hooks/UsePluginUIFeature.tsx

@@ -11,7 +11,7 @@ import type {
   PluginUIFeatureAPIResponse,
   PluginUIFuncWithoutInvenTreeContextType
 } from '../components/plugins/PluginUIFeatureTypes';
-import { useGlobalSettingsState } from '../states/SettingsState';
+import { useGlobalSettingsState } from '../states/SettingsStates';
 
 export function usePluginUIFeature<UIFeatureT extends BaseUIFeature>({
   enabled = true,

src/frontend/src/hooks/UseStatusCodes.tsx

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 
 import type { ModelType } from '@lib/enums/ModelType';
 import { getStatusCodes } from '../components/render/StatusRenderer';
-import { useGlobalStatusState } from '../states/StatusState';
+import { useGlobalStatusState } from '../states/GlobalStatusState';
 
 /**
  * Hook to access status codes, which are enumerated by the backend.

src/frontend/src/pages/Auth/Layout.tsx

@@ -14,7 +14,7 @@ import SplashScreen from '../../components/SplashScreen';
 import { StylishText } from '../../components/items/StylishText';
 import { doLogout } from '../../functions/auth';
 
-export default function Layout() {
+export default function LoginLayoutComponent() {
   return (
     <SplashScreen>
       <Center mih='100vh'>

src/frontend/src/pages/Auth/Login.tsx

@@ -16,8 +16,8 @@ import {
   doBasicLogin,
   followRedirect
 } from '../../functions/auth';
-import { useServerApiState } from '../../states/ApiState';
 import { useLocalState } from '../../states/LocalState';
+import { useServerApiState } from '../../states/ServerApiState';
 import { Wrapper } from './Layout';
 
 export default function Login() {

src/frontend/src/pages/Index/Settings/AccountSettings/SecurityContent.tsx

@@ -35,7 +35,7 @@ import { useShallow } from 'zustand/react/shallow';
 import { api } from '../../../../App';
 import { StylishText } from '../../../../components/items/StylishText';
 import { ProviderLogin, authApi } from '../../../../functions/auth';
-import { useServerApiState } from '../../../../states/ApiState';
+import { useServerApiState } from '../../../../states/ServerApiState';
 import { ApiTokenTable } from '../../../../tables/settings/ApiTokenTable';
 import { QrRegistrationForm } from './QrRegistrationForm';
 import { useReauth } from './useConfirm';

src/frontend/src/pages/Index/Settings/AdminCenter/PluginManagementPanel.tsx

@@ -8,7 +8,7 @@ import { useShallow } from 'zustand/react/shallow';
 import { StylishText } from '../../../../components/items/StylishText';
 import { GlobalSettingList } from '../../../../components/settings/SettingList';
 import { Loadable } from '../../../../functions/loading';
-import { useServerApiState } from '../../../../states/ApiState';
+import { useServerApiState } from '../../../../states/ServerApiState';
 import { useUserState } from '../../../../states/UserState';
 
 const PluginListTable = Loadable(

src/frontend/src/pages/Index/Settings/SystemSettings.tsx

@@ -25,7 +25,7 @@ import { SettingsHeader } from '../../../components/nav/SettingsHeader';
 import type { PanelType } from '../../../components/panels/Panel';
 import { PanelGroup } from '../../../components/panels/PanelGroup';
 import { GlobalSettingList } from '../../../components/settings/SettingList';
-import { useServerApiState } from '../../../states/ApiState';
+import { useServerApiState } from '../../../states/ServerApiState';
 import { useUserState } from '../../../states/UserState';
 
 /**

src/frontend/src/pages/build/BuildDetail.tsx

@@ -51,7 +51,7 @@ import {
 } from '../../hooks/UseForm';
 import { useInstance } from '../../hooks/UseInstance';
 import useStatusCodes from '../../hooks/UseStatusCodes';
-import { useGlobalSettingsState } from '../../states/SettingsState';
+import { useGlobalSettingsState } from '../../states/SettingsStates';
 import { useUserState } from '../../states/UserState';
 import BuildAllocatedStockTable from '../../tables/build/BuildAllocatedStockTable';
 import BuildLineTable from '../../tables/build/BuildLineTable';

src/frontend/src/pages/build/BuildIndex.tsx

@@ -13,7 +13,7 @@ import PermissionDenied from '../../components/errors/PermissionDenied';
 import { PageDetail } from '../../components/nav/PageDetail';
 import type { PanelType } from '../../components/panels/Panel';
 import { PanelGroup } from '../../components/panels/PanelGroup';
-import { useGlobalSettingsState } from '../../states/SettingsState';
+import { useGlobalSettingsState } from '../../states/SettingsStates';
 import { useUserState } from '../../states/UserState';
 import { PartCategoryFilter } from '../../tables/Filter';
 import { BuildOrderTable } from '../../tables/build/BuildOrderTable';

src/frontend/src/pages/core/UserDetail.tsx

@@ -17,7 +17,7 @@ import type { PanelType } from '../../components/panels/Panel';
 import { PanelGroup } from '../../components/panels/PanelGroup';
 import {} from '../../hooks/UseForm';
 import { useInstance } from '../../hooks/UseInstance';
-import { useGlobalSettingsState } from '../../states/SettingsState';
+import { useGlobalSettingsState } from '../../states/SettingsStates';
 import { useUserState } from '../../states/UserState';
 
 /**

src/frontend/src/pages/part/PartDetail.tsx

@@ -86,7 +86,7 @@ import { useInstance } from '../../hooks/UseInstance';
 import {
   useGlobalSettingsState,
   useUserSettingsState
-} from '../../states/SettingsState';
+} from '../../states/SettingsStates';
 import { useUserState } from '../../states/UserState';
 import { BomTable } from '../../tables/bom/BomTable';
 import { UsedInTable } from '../../tables/bom/UsedInTable';

src/frontend/src/pages/part/PartPricingPanel.tsx

@@ -5,7 +5,7 @@ import { useMemo, useState } from 'react';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { UserRoles } from '@lib/enums/Roles';
 import { useInstance } from '../../hooks/UseInstance';
-import { useGlobalSettingsState } from '../../states/SettingsState';
+import { useGlobalSettingsState } from '../../states/SettingsStates';
 import { useUserState } from '../../states/UserState';
 import BomPricingPanel from './pricing/BomPricingPanel';
 import PriceBreakPanel from './pricing/PriceBreakPanel';

src/frontend/src/pages/part/pricing/PricingOverviewPanel.tsx

@@ -36,7 +36,7 @@ import {
 import { formatCurrency, formatDate } from '../../../defaults/formatters';
 import { InvenTreeIcon } from '../../../functions/icons';
 import { useEditApiFormModal } from '../../../hooks/UseForm';
-import { useGlobalSettingsState } from '../../../states/SettingsState';
+import { useGlobalSettingsState } from '../../../states/SettingsStates';
 import { panelOptions } from '../PartPricingPanel';
 
 interface PricingOverviewEntry {

src/frontend/src/pages/purchasing/PurchaseOrderDetail.tsx

@@ -41,7 +41,7 @@ import {
 } from '../../hooks/UseForm';
 import { useInstance } from '../../hooks/UseInstance';
 import useStatusCodes from '../../hooks/UseStatusCodes';
-import { useGlobalSettingsState } from '../../states/SettingsState';
+import { useGlobalSettingsState } from '../../states/SettingsStates';
 import { useUserState } from '../../states/UserState';
 import ExtraLineItemTable from '../../tables/general/ExtraLineItemTable';
 import { PurchaseOrderLineItemTable } from '../../tables/purchasing/PurchaseOrderLineItemTable';

src/frontend/src/pages/sales/ReturnOrderDetail.tsx

@@ -41,7 +41,7 @@ import {
 } from '../../hooks/UseForm';
 import { useInstance } from '../../hooks/UseInstance';
 import useStatusCodes from '../../hooks/UseStatusCodes';
-import { useGlobalSettingsState } from '../../states/SettingsState';
+import { useGlobalSettingsState } from '../../states/SettingsStates';
 import { useUserState } from '../../states/UserState';
 import ExtraLineItemTable from '../../tables/general/ExtraLineItemTable';
 import ReturnOrderLineItemTable from '../../tables/sales/ReturnOrderLineItemTable';

src/frontend/src/pages/sales/SalesOrderDetail.tsx

@@ -47,7 +47,7 @@ import {
 } from '../../hooks/UseForm';
 import { useInstance } from '../../hooks/UseInstance';
 import useStatusCodes from '../../hooks/UseStatusCodes';
-import { useGlobalSettingsState } from '../../states/SettingsState';
+import { useGlobalSettingsState } from '../../states/SettingsStates';
 import { useUserState } from '../../states/UserState';
 import { BuildOrderTable } from '../../tables/build/BuildOrderTable';
 import ExtraLineItemTable from '../../tables/general/ExtraLineItemTable';

src/frontend/src/pages/stock/StockDetail.tsx

@@ -84,7 +84,7 @@ import {
   useEditApiFormModal
 } from '../../hooks/UseForm';
 import { useInstance } from '../../hooks/UseInstance';
-import { useGlobalSettingsState } from '../../states/SettingsState';
+import { useGlobalSettingsState } from '../../states/SettingsStates';
 import { useUserState } from '../../states/UserState';
 import BuildAllocatedStockTable from '../../tables/build/BuildAllocatedStockTable';
 import SalesOrderAllocationTable from '../../tables/sales/SalesOrderAllocationTable';

src/frontend/src/router.tsx

@@ -5,10 +5,14 @@ import { Loadable } from './functions/loading';
 
 // Lazy loaded pages
 export const LayoutComponent = Loadable(
-  lazy(() => import('./components/nav/Layout'))
+  lazy(() => import('./components/nav/Layout')),
+  true,
+  true
 );
 export const LoginLayoutComponent = Loadable(
-  lazy(() => import('./pages/Auth/Layout'))
+  lazy(() => import('./pages/Auth/Layout')),
+  true,
+  true
 );
 
 export const Home = Loadable(lazy(() => import('./pages/Index/Home')));
@@ -119,7 +123,11 @@ export const NotFound = Loadable(
 
 // Auth
 export const Login = Loadable(lazy(() => import('./pages/Auth/Login')));
-export const LoggedIn = Loadable(lazy(() => import('./pages/Auth/LoggedIn')));
+export const LoggedIn = Loadable(
+  lazy(() => import('./pages/Auth/LoggedIn')),
+  true,
+  true
+);
 export const Logout = Loadable(lazy(() => import('./pages/Auth/Logout')));
 export const Register = Loadable(lazy(() => import('./pages/Auth/Register')));
 export const Mfa = Loadable(lazy(() => import('./pages/Auth/MFA')));
@@ -132,7 +140,9 @@ export const ResetPassword = Loadable(
   lazy(() => import('./pages/Auth/ResetPassword'))
 );
 export const VerifyEmail = Loadable(
-  lazy(() => import('./pages/Auth/VerifyEmail'))
+  lazy(() => import('./pages/Auth/VerifyEmail')),
+  true,
+  true
 );
 
 // Routes

src/frontend/src/states/UserState.tsx

@@ -198,5 +198,10 @@ export const useUserState = create<UserStateProps>((set, get) => ({
   },
   hasViewPermission: (model: ModelType) => {
     return get().checkUserPermission(model, UserPermissions.view);
+  },
+  // login state
+  login_checked: false,
+  setLoginChecked: (value) => {
+    set({ login_checked: value });
   }
 }));

src/frontend/src/states/states.tsx

@@ -1,10 +1,10 @@
 import type { PluginProps } from '@lib/types/Plugins';
 import type { NavigateFunction } from 'react-router-dom';
 import { setApiDefaults } from '../App';
-import { useServerApiState } from './ApiState';
+import { useGlobalStatusState } from './GlobalStatusState';
 import { useIconState } from './IconState';
-import { useGlobalSettingsState, useUserSettingsState } from './SettingsState';
+import { useServerApiState } from './ServerApiState';
-import { useGlobalStatusState } from './StatusState';
+import { useGlobalSettingsState, useUserSettingsState } from './SettingsStates';
 import { useUserState } from './UserState';
 
 // Type interface fully defining the current server

src/frontend/src/tables/ColumnRenderers.tsx

@@ -14,7 +14,7 @@ import { TableStatusRenderer } from '../components/render/StatusRenderer';
 import { RenderOwner, RenderUser } from '../components/render/User';
 import { formatCurrency, formatDate } from '../defaults/formatters';
 import { resolveItem } from '../functions/conversion';
-import { useGlobalSettingsState } from '../states/SettingsState';
+import { useGlobalSettingsState } from '../states/SettingsStates';
 import type { TableColumn, TableColumnProps } from './Column';
 import { ProjectCodeHoverCard } from './TableHoverCard';
 

src/frontend/src/tables/Filter.tsx

@@ -8,8 +8,11 @@ import type {
   StatusCodeInterface,
   StatusCodeListInterface
 } from '../components/render/StatusRenderer';
-import { useGlobalSettingsState } from '../states/SettingsState';
+import {
-import { type StatusLookup, useGlobalStatusState } from '../states/StatusState';
+  type StatusLookup,
+  useGlobalStatusState
+} from '../states/GlobalStatusState';
+import { useGlobalSettingsState } from '../states/SettingsStates';
 
 /**
  * Return list of available filter options for a given filter

src/frontend/src/tables/build/BuildOrderTable.tsx

@@ -12,7 +12,7 @@ import { RenderUser } from '../../components/render/User';
 import { useBuildOrderFields } from '../../forms/BuildForms';
 import { useCreateApiFormModal } from '../../hooks/UseForm';
 import { useTable } from '../../hooks/UseTable';
-import { useGlobalSettingsState } from '../../states/SettingsState';
+import { useGlobalSettingsState } from '../../states/SettingsStates';
 import { useUserState } from '../../states/UserState';
 import {
   BooleanColumn,

src/frontend/src/tables/plugin/PluginListTable.tsx

@@ -26,7 +26,7 @@ import {
   useEditApiFormModal
 } from '../../hooks/UseForm';
 import { useTable } from '../../hooks/UseTable';
-import { useServerApiState } from '../../states/ApiState';
+import { useServerApiState } from '../../states/ServerApiState';
 import { useUserState } from '../../states/UserState';
 import type { TableColumn } from '../Column';
 import { BooleanColumn } from '../ColumnRenderers';

src/frontend/src/tables/settings/BarcodeScanHistoryTable.tsx

@@ -25,7 +25,7 @@ import { RenderUser } from '../../components/render/User';
 import { shortenString } from '../../functions/tables';
 import { useDeleteApiFormModal } from '../../hooks/UseForm';
 import { useTable } from '../../hooks/UseTable';
-import { useGlobalSettingsState } from '../../states/SettingsState';
+import { useGlobalSettingsState } from '../../states/SettingsStates';
 import { useUserState } from '../../states/UserState';
 import type { TableColumn } from '../Column';
 import { UserFilter } from '../Filter';

src/frontend/src/tables/settings/CustomStateTable.tsx

@@ -19,7 +19,7 @@ import {
   useEditApiFormModal
 } from '../../hooks/UseForm';
 import { useTable } from '../../hooks/UseTable';
-import { useGlobalStatusState } from '../../states/StatusState';
+import { useGlobalStatusState } from '../../states/GlobalStatusState';
 import { useUserState } from '../../states/UserState';
 import type { TableColumn } from '../Column';
 import { InvenTreeTable } from '../InvenTreeTable';

src/frontend/src/tables/stock/StockItemTable.tsx

@@ -26,7 +26,7 @@ import {
 import { InvenTreeIcon } from '../../functions/icons';
 import { useCreateApiFormModal } from '../../hooks/UseForm';
 import { useTable } from '../../hooks/UseTable';
-import { useGlobalSettingsState } from '../../states/SettingsState';
+import { useGlobalSettingsState } from '../../states/SettingsStates';
 import { useUserState } from '../../states/UserState';
 import type { TableColumn } from '../Column';
 import {

src/frontend/src/tables/stock/StockItemTestResultTable.tsx

@@ -28,7 +28,7 @@ import {
   useEditApiFormModal
 } from '../../hooks/UseForm';
 import { useTable } from '../../hooks/UseTable';
-import { useGlobalSettingsState } from '../../states/SettingsState';
+import { useGlobalSettingsState } from '../../states/SettingsStates';
 import { useUserState } from '../../states/UserState';
 import type { TableColumn } from '../Column';
 import { DateColumn, DescriptionColumn, NoteColumn } from '../ColumnRenderers';

src/frontend/src/views/MainView.tsx

@@ -13,8 +13,16 @@ function checkMobile() {
   return false;
 }
 
-const MobileAppView = Loadable(lazy(() => import('./MobileAppView')));
+const MobileAppView = Loadable(
-const DesktopAppView = Loadable(lazy(() => import('./DesktopAppView')));
+  lazy(() => import('./MobileAppView')),
+  true,
+  true
+);
+const DesktopAppView = Loadable(
+  lazy(() => import('./DesktopAppView')),
+  true,
+  true
+);
 
 // Main App
 export default function MainView() {