[UI] Reduce flicker when reloading detail instance (#9926)

* UI improvement for column selection in tables

- Limit max height of dropdown

* Allow retry for instance query

* Prevent flickering when reloading instance

- Don't hide the children
- Just put a loading overlay on top

* Enhanced rendering for <InstanceDetail>

* Refactor other pages

* remove unused attributes

src/frontend/src/components/nav/InstanceDetail.tsx

@@ -1,37 +1,44 @@
-import { LoadingOverlay } from '@mantine/core';
+import { Center, Container, Loader } from '@mantine/core';
 
 import type { ModelType } from '@lib/enums/ModelType';
 import type { UserRoles } from '@lib/enums/Roles';
+import type { UseQueryResult } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
 import { useUserState } from '../../states/UserState';
 import ClientError from '../errors/ClientError';
 import PermissionDenied from '../errors/PermissionDenied';
 import ServerError from '../errors/ServerError';
 
 export default function InstanceDetail({
-  status,
+  query,
-  loading,
   children,
   requiredRole,
   requiredPermission
 }: Readonly<{
-  status: number;
+  query: UseQueryResult;
-  loading: boolean;
   children: React.ReactNode;
   requiredRole?: UserRoles;
   requiredPermission?: ModelType;
 }>) {
   const user = useUserState();
 
-  if (loading || !user.isLoggedIn()) {
+  const [loaded, setLoaded] = useState<boolean>(false);
-    return <LoadingOverlay />;
-  }
 
-  if (status >= 500) {
+  useEffect(() => {
-    return <ServerError status={status} />;
+    if (query.isSuccess) {
-  }
+      setLoaded(true);
+    }
+  }, [query.isSuccess]);
 
-  if (status >= 400) {
+  if (query.isError) {
-    return <ClientError status={status} />;
+    const reason = query.failureReason as any;
+    const statusCode = reason?.response?.status ?? reason?.status ?? 0;
+
+    if (statusCode >= 500) {
+      return <ServerError status={statusCode} />;
+    }
+
+    return <ClientError status={statusCode} />;
   }
 
   if (requiredRole && !user.hasViewRole(requiredRole)) {
@@ -42,5 +49,16 @@ export default function InstanceDetail({
     return <PermissionDenied />;
   }
 
+  if (!loaded || !user.isLoggedIn()) {
+    // Return a loader for the first page load
+    return (
+      <Center>
+        <Container>
+          <Loader />
+        </Container>
+      </Center>
+    );
+  }
+
   return <>{children}</>;
 }

src/frontend/src/hooks/UseInstance.tsx

@@ -12,7 +12,6 @@ export interface UseInstanceResult {
   refreshInstance: () => void;
   refreshInstancePromise: () => Promise<QueryObserverResult<any, any>>;
   instanceQuery: any;
-  requestStatus: number;
   isLoaded: boolean;
 }
 
@@ -35,7 +34,6 @@ export function useInstance<T = any>({
   hasPrimaryKey = true,
   refetchOnMount = true,
   refetchOnWindowFocus = false,
-  throwError = false,
   updateInterval
 }: {
   endpoint: ApiEndpoints;
@@ -46,15 +44,12 @@ export function useInstance<T = any>({
   defaultValue?: any;
   refetchOnMount?: boolean;
   refetchOnWindowFocus?: boolean;
-  throwError?: boolean;
   updateInterval?: number;
 }): UseInstanceResult {
   const api = useApi();
 
   const [instance, setInstance] = useState<T | undefined>(defaultValue);
 
-  const [requestStatus, setRequestStatus] = useState<number>(0);
-
   const instanceQuery = useQuery<T>({
     queryKey: [
       'instance',
@@ -84,7 +79,6 @@ export function useInstance<T = any>({
           params: params
         })
         .then((response) => {
-          setRequestStatus(response.status);
           switch (response.status) {
             case 200:
               setInstance(response.data);
@@ -93,15 +87,6 @@ export function useInstance<T = any>({
               setInstance(defaultValue);
               return defaultValue;
           }
-        })
-        .catch((error) => {
-          setRequestStatus(error.response?.status || 0);
-          setInstance(defaultValue);
-          console.error(`ERR: Error fetching instance ${url}:`, error);
-
-          if (throwError) throw error;
-
-          return defaultValue;
         });
     },
     refetchOnMount: refetchOnMount,
@@ -131,7 +116,6 @@ export function useInstance<T = any>({
     refreshInstance,
     refreshInstancePromise,
     instanceQuery,
-    requestStatus,
     isLoaded
   };
 }

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

@@ -75,8 +75,7 @@ export default function BuildDetail() {
   const {
     instance: build,
     refreshInstance,
-    instanceQuery,
+    instanceQuery
-    requestStatus
   } = useInstance({
     endpoint: ApiEndpoints.build_order_list,
     pk: id,
@@ -621,11 +620,7 @@ export default function BuildDetail() {
       {holdOrder.modal}
       {issueOrder.modal}
       {completeOrder.modal}
-      <InstanceDetail
+      <InstanceDetail query={instanceQuery} requiredRole={UserRoles.build}>
-        status={requestStatus}
-        loading={instanceQuery.isFetching}
-        requiredRole={UserRoles.build}
-      >
         <Stack gap='xs'>
           <PageDetail
             title={`${t`Build Order`}: ${build.reference}`}

src/frontend/src/pages/company/CompanyDetail.tsx

@@ -73,8 +73,7 @@ export default function CompanyDetail(props: Readonly<CompanyDetailProps>) {
   const {
     instance: company,
     refreshInstance,
-    instanceQuery,
+    instanceQuery
-    requestStatus
   } = useInstance({
     endpoint: ApiEndpoints.company_list,
     pk: id,
@@ -326,7 +325,10 @@ export default function CompanyDetail(props: Readonly<CompanyDetailProps>) {
     <>
       {editCompany.modal}
       {deleteCompany.modal}
-      <InstanceDetail status={requestStatus} loading={instanceQuery.isFetching}>
+      <InstanceDetail
+        query={instanceQuery}
+        requiredPermission={ModelType.company}
+      >
         <Stack gap='xs'>
           <PageDetail
             title={`${t`Company`}: ${company.name}`}

src/frontend/src/pages/company/ManufacturerPartDetail.tsx

@@ -51,8 +51,7 @@ export default function ManufacturerPartDetail() {
   const {
     instance: manufacturerPart,
     instanceQuery,
-    refreshInstance,
+    refreshInstance
-    requestStatus
   } = useInstance({
     endpoint: ApiEndpoints.manufacturer_part_list,
     pk: id,
@@ -273,7 +272,10 @@ export default function ManufacturerPartDetail() {
       {deleteManufacturerPart.modal}
       {duplicateManufacturerPart.modal}
       {editManufacturerPart.modal}
-      <InstanceDetail status={requestStatus} loading={instanceQuery.isFetching}>
+      <InstanceDetail
+        query={instanceQuery}
+        requiredPermission={ModelType.manufacturerpart}
+      >
         <Stack gap='xs'>
           <PageDetail
             title={t`ManufacturerPart`}

src/frontend/src/pages/company/SupplierPartDetail.tsx

@@ -56,8 +56,7 @@ export default function SupplierPartDetail() {
   const {
     instance: supplierPart,
     instanceQuery,
-    refreshInstance,
+    refreshInstance
-    requestStatus
   } = useInstance({
     endpoint: ApiEndpoints.supplier_part_list,
     pk: id,
@@ -401,8 +400,7 @@ export default function SupplierPartDetail() {
       {duplicateSupplierPart.modal}
       {editSupplierPart.modal}
       <InstanceDetail
-        status={requestStatus}
+        query={instanceQuery}
-        loading={instanceQuery.isFetching}
         requiredRole={UserRoles.purchase_order}
       >
         <Stack gap='xs'>

src/frontend/src/pages/core/GroupDetail.tsx

@@ -26,7 +26,7 @@ import { useInstance } from '../../hooks/UseInstance';
 export default function GroupDetail() {
   const { id } = useParams();
 
-  const { instance, instanceQuery, requestStatus } = useInstance({
+  const { instance, instanceQuery } = useInstance({
     endpoint: ApiEndpoints.group_list,
     pk: id
   });
@@ -72,7 +72,7 @@ export default function GroupDetail() {
   }, [instance, id]);
 
   return (
-    <InstanceDetail status={requestStatus} loading={instanceQuery.isFetching}>
+    <InstanceDetail query={instanceQuery}>
       <Stack gap='xs'>
         <PageDetail
           title={`${t`Group`}: ${instance.name}`}

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

@@ -29,7 +29,7 @@ export default function UserDetail() {
   const user = useUserState();
   const settings = useGlobalSettingsState();
 
-  const { instance, instanceQuery, requestStatus } = useInstance({
+  const { instance, instanceQuery } = useInstance({
     endpoint: ApiEndpoints.user_list,
     pk: id
   });
@@ -214,7 +214,7 @@ export default function UserDetail() {
   }, [instance, instanceQuery]);
 
   return (
-    <InstanceDetail status={requestStatus} loading={instanceQuery.isFetching}>
+    <InstanceDetail query={instanceQuery}>
       <Stack gap='xs'>
         <PageDetail
           title={`${t`User`}: ${instance.username}`}

src/frontend/src/pages/part/CategoryDetail.tsx

@@ -64,8 +64,7 @@ export default function CategoryDetail() {
   const {
     instance: category,
     refreshInstance,
-    instanceQuery,
+    instanceQuery
-    requestStatus
   } = useInstance({
     endpoint: ApiEndpoints.category_list,
     hasPrimaryKey: true,
@@ -325,8 +324,7 @@ export default function CategoryDetail() {
       {editCategory.modal}
       {deleteCategory.modal}
       <InstanceDetail
-        status={requestStatus}
+        query={instanceQuery}
-        loading={id ? instanceQuery.isFetching : false}
         requiredRole={UserRoles.part_category}
       >
         <Stack gap='xs'>

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

@@ -130,8 +130,7 @@ export default function PartDetail() {
   const {
     instance: part,
     refreshInstance,
-    instanceQuery,
+    instanceQuery
-    requestStatus
   } = useInstance({
     endpoint: ApiEndpoints.part_list,
     pk: id,
@@ -1028,11 +1027,7 @@ export default function PartDetail() {
       {orderPartsWizard.wizard}
       {findBySerialNumber.modal}
       {transferStockItems.modal}
-      <InstanceDetail
+      <InstanceDetail query={instanceQuery} requiredRole={UserRoles.part}>
-        status={requestStatus}
-        loading={instanceQuery.isFetching}
-        requiredRole={UserRoles.part}
-      >
         <Stack gap='xs'>
           {user.hasViewRole(UserRoles.part_category) && (
             <NavigationTree

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

@@ -59,8 +59,7 @@ export default function PurchaseOrderDetail() {
   const {
     instance: order,
     instanceQuery,
-    refreshInstance,
+    refreshInstance
-    requestStatus
   } = useInstance({
     endpoint: ApiEndpoints.purchase_order_list,
     pk: id,
@@ -514,8 +513,7 @@ export default function PurchaseOrderDetail() {
       {editPurchaseOrder.modal}
       {duplicatePurchaseOrder.modal}
       <InstanceDetail
-        status={requestStatus}
+        query={instanceQuery}
-        loading={instanceQuery.isFetching}
         requiredRole={UserRoles.purchase_order}
       >
         <Stack gap='xs'>

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

@@ -59,8 +59,7 @@ export default function ReturnOrderDetail() {
   const {
     instance: order,
     instanceQuery,
-    refreshInstance,
+    refreshInstance
-    requestStatus
   } = useInstance({
     endpoint: ApiEndpoints.return_order_list,
     pk: id,
@@ -499,8 +498,7 @@ export default function ReturnOrderDetail() {
       {completeOrder.modal}
       {duplicateReturnOrder.modal}
       <InstanceDetail
-        status={requestStatus}
+        query={instanceQuery}
-        loading={instanceQuery.isFetching}
         requiredRole={UserRoles.return_order}
       >
         <Stack gap='xs'>

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

@@ -68,8 +68,7 @@ export default function SalesOrderDetail() {
   const {
     instance: order,
     instanceQuery,
-    refreshInstance,
+    refreshInstance
-    requestStatus
   } = useInstance({
     endpoint: ApiEndpoints.sales_order_list,
     pk: id,
@@ -563,8 +562,7 @@ export default function SalesOrderDetail() {
       {editSalesOrder.modal}
       {duplicateSalesOrder.modal}
       <InstanceDetail
-        status={requestStatus}
+        query={instanceQuery}
-        loading={instanceQuery.isFetching}
         requiredRole={UserRoles.sales_order}
       >
         <Stack gap='xs'>

src/frontend/src/pages/sales/SalesOrderShipmentDetail.tsx

@@ -52,8 +52,7 @@ export default function SalesOrderShipmentDetail() {
   const {
     instance: shipment,
     instanceQuery: shipmentQuery,
-    refreshInstance: refreshShipment,
+    refreshInstance: refreshShipment
-    requestStatus: shipmentStatus
   } = useInstance({
     endpoint: ApiEndpoints.sales_order_shipment_list,
     pk: id,
@@ -65,8 +64,7 @@ export default function SalesOrderShipmentDetail() {
   const {
     instance: customer,
     instanceQuery: customerQuery,
-    refreshInstance: refreshCustomer,
+    refreshInstance: refreshCustomer
-    requestStatus: customerStatus
   } = useInstance({
     endpoint: ApiEndpoints.company_list,
     pk: shipment.order_detail?.customer,
@@ -351,8 +349,7 @@ export default function SalesOrderShipmentDetail() {
       {editShipment.modal}
       {deleteShipment.modal}
       <InstanceDetail
-        status={shipmentStatus}
+        query={shipmentQuery}
-        loading={shipmentQuery.isFetching || customerQuery.isFetching}
         requiredRole={UserRoles.sales_order}
       >
         <Stack gap='xs'>

src/frontend/src/pages/stock/LocationDetail.tsx

@@ -64,8 +64,7 @@ export default function Stock() {
   const {
     instance: location,
     refreshInstance,
-    instanceQuery,
+    instanceQuery
-    requestStatus
   } = useInstance({
     endpoint: ApiEndpoints.stock_location_list,
     hasPrimaryKey: true,
@@ -423,8 +422,7 @@ export default function Stock() {
       {scanInStockItem.dialog}
       {scanInStockLocation.dialog}
       <InstanceDetail
-        status={requestStatus}
+        query={instanceQuery}
-        loading={id ? instanceQuery.isFetching : false}
         requiredRole={UserRoles.stock_location}
       >
         <Stack>

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

@@ -114,8 +114,7 @@ export default function StockDetail() {
     instance: stockitem,
     refreshInstance,
     refreshInstancePromise,
-    instanceQuery,
+    instanceQuery
-    requestStatus
   } = useInstance({
     endpoint: ApiEndpoints.stock_item_list,
     pk: id,
@@ -1053,9 +1052,8 @@ export default function StockDetail() {
       {findBySerialNumber.modal}
       {scanIntoLocation.dialog}
       <InstanceDetail
-        requiredRole={UserRoles.stock}
+        query={instanceQuery}
-        status={requestStatus}
+        requiredPermission={ModelType.stockitem}
-        loading={instanceQuery.isFetching}
       >
         <Stack>
           {user.hasViewRole(UserRoles.stock_location) && (

src/frontend/src/tables/settings/GroupTable.tsx

@@ -45,7 +45,6 @@ export function GroupDrawer({
   } = useInstance({
     endpoint: ApiEndpoints.group_list,
     pk: id,
-    throwError: true,
     params: {
       permission_detail: true,
       role_detail: true,

src/frontend/src/tables/settings/TemplateTable.tsx

@@ -80,8 +80,7 @@ export function TemplateDrawer({
   } = useInstance<TemplateI>({
     endpoint: templateEndpoint,
     hasPrimaryKey: true,
-    pk: id,
+    pk: id
-    throwError: true
   });
 
   // Editors

src/frontend/src/tables/settings/UserTable.tsx

@@ -68,8 +68,7 @@ export function UserDrawer({
     instanceQuery: { isFetching, error }
   } = useInstance<UserDetailI>({
     endpoint: ApiEndpoints.user_list,
-    pk: id,
+    pk: id
-    throwError: true
   });
 
   const currentUserPk = useUserState(useShallow((s) => s.user?.pk));