[PUI] Tweaks (#7180)

* Table: Add loading state

* Update BOM pricing panel

* Fix for TableStringValue

- Order of operations

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

@@ -183,14 +183,14 @@ function NameBadge({ pk, type }: { pk: string | number; type: BadgeType }) {
 function TableStringValue(props: Readonly<FieldProps>) {
   let value = props?.field_value;
 
-  if (value === undefined) {
-    return '---';
-  }
-
   if (props.field_data?.value_formatter) {
     value = props.field_data.value_formatter();
   }
 
+  if (value === undefined) {
+    return '---';
+  }
+
   if (props.field_data?.badge) {
     return <NameBadge pk={value} type={props.field_data.badge} />;
   }

src/frontend/src/hooks/UseTable.tsx

@@ -17,6 +17,8 @@ export type TableState = {
   tableKey: string;
   refreshTable: () => void;
   activeFilters: TableFilter[];
+  isLoading: boolean;
+  setIsLoading: (value: boolean) => void;
   setActiveFilters: (filters: TableFilter[]) => void;
   clearActiveFilters: () => void;
   expandedRecords: any[];
@@ -120,9 +122,13 @@ export function useTable(tableName: string): TableState {
     [records]
   );
 
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
   return {
     tableKey,
     refreshTable,
+    isLoading,
+    setIsLoading,
     activeFilters,
     setActiveFilters,
     clearActiveFilters,

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

@@ -34,7 +34,7 @@ import { apiUrl } from '../../../states/ApiState';
 import { TableColumn } from '../../../tables/Column';
 import { DateColumn, PartColumn } from '../../../tables/ColumnRenderers';
 import { InvenTreeTable } from '../../../tables/InvenTreeTable';
-import { NoPricingData } from './PricingPanel';
+import { LoadingPricingData, NoPricingData } from './PricingPanel';
 
 // Display BOM data as a pie chart
 function BomPieChart({
@@ -209,6 +209,10 @@ export default function BomPricingPanel({
 
   const [chartType, setChartType] = useState<string>('pie');
 
+  const hasData: boolean = useMemo(() => {
+    return !table.isLoading && bomPricingData.length > 0;
+  }, [table.isLoading, bomPricingData.length]);
+
   return (
     <Stack spacing="xs">
       <SimpleGrid cols={2}>
@@ -227,13 +231,21 @@ export default function BomPricingPanel({
             modelField: 'sub_part'
           }}
         />
-        {bomPricingData.length > 0 ? (
+        <Stack spacing="xs">
+          {table.isLoading && <LoadingPricingData />}
+          {hasData && (
             <Stack spacing="xs">
               {chartType == 'bar' && (
-              <BomBarChart data={bomPricingData} currency={pricing?.currency} />
+                <BomBarChart
+                  data={bomPricingData}
+                  currency={pricing?.currency}
+                />
               )}
               {chartType == 'pie' && (
-              <BomPieChart data={bomPricingData} currency={pricing?.currency} />
+                <BomPieChart
+                  data={bomPricingData}
+                  currency={pricing?.currency}
+                />
               )}
               <SegmentedControl
                 value={chartType}
@@ -244,9 +256,9 @@ export default function BomPricingPanel({
                 ]}
               />
             </Stack>
-        ) : (
-          <NoPricingData />
           )}
+          {!hasData && !table.isLoading && <NoPricingData />}
+        </Stack>
       </SimpleGrid>
     </Stack>
   );

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

@@ -4,6 +4,8 @@ import {
   AccordionControlProps,
   Alert,
   Box,
+  Center,
+  Loader,
   Space,
   Stack,
   Text,
@@ -68,3 +70,14 @@ export function NoPricingData() {
     </Stack>
   );
 }
+
+export function LoadingPricingData() {
+  return (
+    <Center>
+      <Stack spacing="xs">
+        <Text>{t`Loading pricing data`}</Text>
+        <Loader />
+      </Stack>
+    </Center>
+  );
+}

src/frontend/src/tables/InvenTreeTable.tsx

@@ -454,6 +454,10 @@ export function InvenTreeTable<T = any>({
     refetchOnMount: true
   });
 
+  useEffect(() => {
+    tableState.setIsLoading(isFetching);
+  }, [isFetching]);
+
   // Update tableState.records when new data received
   useEffect(() => {
     tableState.setRecords(data ?? []);