fix: improve incorrect loading indicators for stash items

PoeStack · Mar 12, 2024 · 715b1e4 · 715b1e4
1 parent f067a85
commit 715b1e4
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 15 deletions.
diff --git a/src/green-app/src/app/listing-tool/listing-tool-handler.tsx b/src/green-app/src/app/listing-tool/listing-tool-handler.tsx
@@ -84,7 +84,6 @@ const ListingToolHandler = ({ setRefetchAll, setStashListFetching }: ListingTool
 
   const {
     data: [categoryTagItem, selectableCategories, ungroupedItems],
-    // isGroupedItemsPending,
     isGroupedItemsSuccess,
     isGroupedItemsLoading,
     isGroupedItemsFetching,
@@ -154,7 +153,6 @@ const ListingToolHandler = ({ setRefetchAll, setStashListFetching }: ListingTool
 
     return {
       data: [categoryTagItem, selectableCategories, ungroupedItems],
-      // isGroupedItemsPending: groupedItemsResults.some((result) => result.isPending),
       isGroupedItemsSuccess: groupedItemsResults.some((result) => result.isSuccess),
       isGroupedItemsLoading: groupedItemsResults.some((result) => result.isLoading),
       isGroupedItemsFetching: groupedItemsResults.some((result) => result.isFetching),
@@ -219,7 +217,11 @@ const ListingToolHandler = ({ setRefetchAll, setStashListFetching }: ListingTool
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [league, stashes, isGroupedItemsSuccess, isGroupedItemsFetching, setSelectedCategory])
 
-  const { data: displayedItems, isValuationPending } = useQueries({
+  const {
+    data: displayedItems,
+    isValuationPending,
+    isValuationError
+  } = useQueries({
     queries:
       categoryTagItem && league
         ? Object.keys(categoryTagItem).map((tag) => {
@@ -293,16 +295,12 @@ const ListingToolHandler = ({ setRefetchAll, setStashListFetching }: ListingTool
 
       displayedItems = mergeItemStacks(displayedItems)
 
+      const isValuationPending = valuationResults.some((result) => result.isPending)
       const isValuationError =
         isGroupedItemsError || valuationResults.some((result) => result.isError)
-      const isValuationFetching =
-        isGroupedItemsFetching || valuationResults.some((result) => result.isFetching)
       return {
-        data: isValuationError || isValuationFetching ? [] : displayedItems,
-        // We have stash indicators for error handling or informations
-        // data: displayedItems,
-        isValuationPending: valuationResults.some((result) => result.isPending),
-        isValuationFetching,
+        data: isGroupedItemsLoading || isValuationPending || isValuationError ? [] : displayedItems,
+        isValuationPending,
         isValuationError
       }
     }
@@ -320,8 +318,8 @@ const ListingToolHandler = ({ setRefetchAll, setStashListFetching }: ListingTool
 
   useEffect(() => {
     console.log('Set setStashListFetching')
-    setStashListFetching(isGroupedItemsFetching || isValuationPending)
-  }, [isGroupedItemsFetching, isValuationPending, setStashListFetching])
+    setStashListFetching(isGroupedItemsLoading || isValuationPending || isValuationError)
+  }, [isGroupedItemsLoading, isValuationPending, isValuationError, setStashListFetching])
 
   useEffect(() => {
     console.log('Set setSelectableCategories and setSelectableSubCategories')

diff --git a/src/green-app/src/app/listing-tool/listing-tool-table.tsx b/src/green-app/src/app/listing-tool/listing-tool-table.tsx
@@ -14,6 +14,7 @@ export const modifiedItemsAtom = atom<IDisplayedItem[]>([])
 interface DataTableProps {
   columns: ColumnDef<IDisplayedItem>[]
   className?: string
+  isLoading?: boolean
   globalFilter: string
   onGlobalFilterChange: (value: string) => void
   globalFilterFn?: FilterFnOption<IDisplayedItem>
@@ -23,6 +24,7 @@ interface DataTableProps {
 const ListingToolTable = ({
   columns,
   className,
+  isLoading,
   globalFilter,
   onGlobalFilterChange,
   globalFilterFn
@@ -87,7 +89,7 @@ const ListingToolTable = ({
 
   return (
     <div className={className}>
-      <DataTable options={tableOptions} pageSizes={pageSizes} />
+      <DataTable options={tableOptions} pageSizes={pageSizes} isLoading={isLoading} />
     </div>
   )
 }

diff --git a/src/green-app/src/app/listing-tool/page.tsx b/src/green-app/src/app/listing-tool/page.tsx
@@ -296,6 +296,7 @@ export default function Page() {
             </div>
             <ListingToolTable
               className=""
+              isLoading={isStashListItemsFetching}
               columns={columns as any}
               globalFilter={globalFilter}
               onGlobalFilterChange={setGlobalFilter}

diff --git a/src/green-app/src/components/data-table/data-table.tsx b/src/green-app/src/components/data-table/data-table.tsx
@@ -20,6 +20,7 @@ import {
 } from '@tanstack/react-table'
 import React, { memo } from 'react'
 import { TablePagination } from '../table-pagination'
+import { RefreshCwIcon } from 'lucide-react'
 
 export type DataTableOptions<TData> = Omit<
   TableOptions<TData>,
@@ -29,9 +30,10 @@ export type DataTableOptions<TData> = Omit<
 type DataTableProps<TData> = {
   options: DataTableOptions<TData>
   pageSizes?: number[]
+  isLoading?: boolean
 }
 
-const DataTable = <TData,>({ options, pageSizes }: DataTableProps<TData>) => {
+const DataTable = <TData,>({ options, pageSizes, isLoading }: DataTableProps<TData>) => {
   const table = useReactTable({
     enableColumnResizing: true,
     columnResizeMode: 'onChange',
@@ -133,7 +135,14 @@ const DataTable = <TData,>({ options, pageSizes }: DataTableProps<TData>) => {
             ) : (
               <TableRow>
                 <TableCell colSpan={options.columns.length} className="h-[6.5rem] text-center">
-                  No results.
+                  {isLoading ? (
+                    <div className="flex flex-row justify-center items-center gap-2">
+                      Loading items ...
+                      <RefreshCwIcon className="w-4 h-w shrink-0 animate-spin" />
+                    </div>
+                  ) : (
+                    <>No results.</>
+                  )}
                 </TableCell>
               </TableRow>
             )}