From d6218b76ffa8d061025a1b751a125201733d6dec Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Mon, 19 Aug 2024 16:33:30 +1000
Subject: [PATCH] Improve loading of "details" panel (#7921)

- Remove suspenses
- remove global loading lock
- Improves "responsiveness" feel
---
 .../src/components/details/Details.tsx        | 61 +++++++++++--------
 src/frontend/src/pages/part/PartDetail.tsx    |  3 +-
 2 files changed, 37 insertions(+), 27 deletions(-)

diff --git a/src/frontend/src/components/details/Details.tsx b/src/frontend/src/components/details/Details.tsx
index f58136d628..b266bd47e1 100644
--- a/src/frontend/src/components/details/Details.tsx
+++ b/src/frontend/src/components/details/Details.tsx
@@ -2,15 +2,16 @@ import { t } from '@lingui/macro';
 import {
   Anchor,
   Badge,
+  Group,
   Paper,
   Skeleton,
   Stack,
   Table,
   Text
 } from '@mantine/core';
-import { useSuspenseQuery } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
 import { getValueAtPath } from 'mantine-datatable';
-import { Suspense, useCallback, useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { api } from '../../App';
@@ -96,7 +97,7 @@ type FieldProps = {
  * Badge appends icon to describe type of Owner
  */
 function NameBadge({ pk, type }: { pk: string | number; type: BadgeType }) {
-  const { data } = useSuspenseQuery({
+  const { data } = useQuery({
     queryKey: ['badge', type, pk],
     queryFn: async () => {
       let path: string = '';
@@ -111,6 +112,8 @@ function NameBadge({ pk, type }: { pk: string | number; type: BadgeType }) {
         case 'group':
           path = ApiEndpoints.group_list;
           break;
+        default:
+          return {};
       }
 
       const url = apiUrl(path, pk);
@@ -133,9 +136,13 @@ function NameBadge({ pk, type }: { pk: string | number; type: BadgeType }) {
 
   const settings = useGlobalSettingsState();
 
+  if (!data || data.isLoading || data.isFetching) {
+    return <Skeleton height={12} radius="md" />;
+  }
+
   // Rendering a user's rame for the badge
   function _render_name() {
-    if (!data) {
+    if (!data || !data.pk) {
       return '';
     } else if (type === 'user' && settings.isSet('DISPLAY_FULL_NAMES')) {
       if (data.first_name || data.last_name) {
@@ -151,18 +158,16 @@ function NameBadge({ pk, type }: { pk: string | number; type: BadgeType }) {
   }
 
   return (
-    <Suspense fallback={<Skeleton width={200} height={20} radius="xl" />}>
-      <div style={{ display: 'flex', alignItems: 'center' }}>
-        <Badge
-          color="dark"
-          variant="filled"
-          style={{ display: 'flex', alignItems: 'center' }}
-        >
-          {data?.name ?? _render_name()}
-        </Badge>
-        <InvenTreeIcon icon={type === 'user' ? type : data.label} />
-      </div>
-    </Suspense>
+    <Group wrap="nowrap" gap="sm" justify="right">
+      <Badge
+        color="dark"
+        variant="filled"
+        style={{ display: 'flex', alignItems: 'center' }}
+      >
+        {data?.name ?? _render_name()}
+      </Badge>
+      <InvenTreeIcon icon={type === 'user' ? type : data.label} />
+    </Group>
   );
 }
 
@@ -195,15 +200,15 @@ function TableStringValue(props: Readonly<FieldProps>) {
         alignItems: 'flex-start'
       }}
     >
-      <Suspense fallback={<Skeleton width={200} height={20} radius="xl" />}>
-        <span>
+      <Group wrap="nowrap" gap="xs" justify="space-apart">
+        <Group wrap="nowrap" gap="xs" justify="left">
           {value ? value : props.field_data?.unit && '0'}{' '}
           {props.field_data.unit == true && props.unit}
-        </span>
-      </Suspense>
-      {props.field_data.user && (
-        <NameBadge pk={props.field_data?.user} type="user" />
-      )}
+        </Group>
+        {props.field_data.user && (
+          <NameBadge pk={props.field_data?.user} type="user" />
+        )}
+      </Group>
     </div>
   );
 }
@@ -215,7 +220,7 @@ function BooleanValue(props: Readonly<FieldProps>) {
 function TableAnchorValue(props: Readonly<FieldProps>) {
   const navigate = useNavigate();
 
-  const { data } = useSuspenseQuery({
+  const { data } = useQuery({
     queryKey: ['detail', props.field_data.model, props.field_value],
     queryFn: async () => {
       if (!props.field_data?.model) {
@@ -260,6 +265,10 @@ function TableAnchorValue(props: Readonly<FieldProps>) {
     [detailUrl]
   );
 
+  if (!data || data.isLoading || data.isFetching) {
+    return <Skeleton height={12} radius="md" />;
+  }
+
   if (props.field_data.external) {
     return (
       <Anchor
@@ -294,7 +303,7 @@ function TableAnchorValue(props: Readonly<FieldProps>) {
   }
 
   return (
-    <Suspense fallback={<Skeleton width={200} height={20} radius="xl" />}>
+    <div>
       {make_link ? (
         <Anchor href="#" onClick={handleLinkClick}>
           <Text>{value}</Text>
@@ -302,7 +311,7 @@ function TableAnchorValue(props: Readonly<FieldProps>) {
       ) : (
         <Text>{value}</Text>
       )}
-    </Suspense>
+    </div>
   );
 }
 
diff --git a/src/frontend/src/pages/part/PartDetail.tsx b/src/frontend/src/pages/part/PartDetail.tsx
index 07a54915ab..fac72ababc 100644
--- a/src/frontend/src/pages/part/PartDetail.tsx
+++ b/src/frontend/src/pages/part/PartDetail.tsx
@@ -375,7 +375,7 @@ export default function PartDetail() {
     ];
 
     // Add in price range data
-    id &&
+    if (id) {
       br.push({
         type: 'string',
         name: 'pricing',
@@ -412,6 +412,7 @@ export default function PartDetail() {
           );
         }
       });
+    }
 
     // Add in stocktake information
     if (id && part.last_stocktake) {