Revize ab632fe5

NEW: added loading indicator for individual inventories
re #10850

src/components/listView/ListView.tsx

@@ -7 +7 @@
 import { log } from "../../logging/logger"
 import ListViewInventoryGroup from "./ListViewInventoryGroup"
 import { ErrorToast } from "../toast/ErrorToast"
+import LoadingBox from "../loading/LoadingBox"
 
 type ListViewProps = {
     navigation: any
@@ -16 +17 @@
 
     const inventories = useSelector((state: RootState) => state.listView.inventories)
     const numberOfResults = useSelector((state: RootState) => state.listView.numOfResults)
-
+    const loading = useSelector((state: RootState) => state.listView.loading)
 
     const lastError = useSelector((state: RootState) => state.listView.lastError)
     const toast = useToast();
@@ -38 +39 @@
     return (
         <>
             <Text fontSize={16} fontWeight={"bold"} color={"primary.500"}>Search results{numberOfResults ? ` (${numberOfResults})` : ""}:</Text>
-            {inventories && inventories.length > 0 ?
+            {loading ? (
+                <LoadingBox text={"Loading..."} />
+            )  :
+            inventories && inventories.length > 0 ?
                 (inventories.length > 1 ?
                     inventories.map((inventory) => (
                         <ListViewInventoryGroup
@@ -57 +61 @@
                     )) : (
                     <Text alignSelf={"center"}>No results found</Text>
                 )
+
             }
         </>
     )

src/components/listView/ListViewInventoryGroup.tsx

@@ -1 @@
-import { Badge, Button, Pressable, VStack, Text, Fab, Divider } from "native-base"
-import { ItemPreviewType } from "../../types/listViewTypes"
+import {Badge, Button, Pressable, VStack, Text, Fab, Divider} from "native-base"
+import {ItemPreviewType} from "../../types/listViewTypes"
 import ItemPreview from "./ItemPreview"
-import { useDispatch, useSelector } from "react-redux"
-import { AppDispatch, RootState } from "../../stores/store"
-import { useEffect, useState } from "react"
-import { loadItemsByInventory } from "../../stores/actions/listViewThunks"
+import {useDispatch, useSelector} from "react-redux"
+import {AppDispatch, RootState} from "../../stores/store"
+import {useEffect, useState} from "react"
+import {loadItemsByInventory} from "../../stores/actions/listViewThunks"
+import LoadingBox from "../loading/LoadingBox"
 
 interface ListViewInventoryGroupProps {
     inventoryName: string
@@ -16 +17 @@
 const ListViewInventoryGroup = (props: ListViewInventoryGroupProps) => {
     const items = useSelector((state: RootState) => state.listView.data[props.inventoryName])
     const loading = useSelector((state: RootState) => state.listView.loading)
+    const inventoriesDataLoading = useSelector((state: RootState) => state.listView.inventoriesDataLoading)
+    const [isInventoryDataLoading, setIsInventoryDataLoading] = useState(false)
     const [isExpanded, setIsExpanded] = useState(props.defaultOpen ? props.defaultOpen : false)
     const pagination = useSelector((state: RootState) => state.listView.loadedPages[props.inventoryName])
 
@@ -77 +80 @@
         }
     }, [loading])
 
+    useEffect(() => {
+        setIsInventoryDataLoading(inventoriesDataLoading[props.inventoryName] ? inventoriesDataLoading[props.inventoryName] : false)
+    }, [inventoriesDataLoading]);
+
     useEffect(() => {
         if (props.defaultOpen) {
             if (!items || items.length == 0) {
@@ -86 +93 @@
     }, [])
 
     return (
-        <VStack mb={2} key={props.inventoryName}>
+        <VStack mb={ 2 } key={ props.inventoryName }>
             <Button
-                onPress={() => setIsExpanded(!isExpanded)}
-                alignSelf={"flex-start"}
+                onPress={ () => setIsExpanded(!isExpanded) }
+                alignSelf={ "flex-start" }
                 variant="solid"
-                bg={"primary.500"}
-                mb={2}
-                p={1}
-                key={props.inventoryName}
-                size={"md"}
+                bg={ "primary.500" }
+                mb={ 2 }
+                p={ 1 }
+                key={ props.inventoryName }
+                size={ "md" }
             >
-                {props.inventoryLabel}
+                { props.inventoryLabel }
             </Button>
-            {isExpanded && items && items.map((item) => (
+            { isExpanded && items && items.map((item) => (
                 <ItemPreview
                     // @ts-ignore
-                    caption={item.object[0].caption}
-                    title={item.text}
-                    name={parseArtists(item)}
-                    image={parseImage(item)}
-                    itemId={item.xml_id}
-                    inventoryLabel={props.inventoryLabel}
-                    navigation={props.navigation}
+                    caption={ item.object[0].caption }
+                    title={ item.text }
+                    name={ parseArtists(item) }
+                    image={ parseImage(item) }
+                    itemId={ item.xml_id }
+                    inventoryLabel={ props.inventoryLabel }
+                    navigation={ props.navigation }
                 />
-            ))}
-            {isExpanded && items && pagination && pagination.cursor < pagination.records && (
+            )) }
+            { isExpanded && items && pagination && pagination.cursor < pagination.records && !isInventoryDataLoading && (
                 <Button
-                    onPress={() => dispatch(loadItemsByInventory(props.inventoryName))}
-                    variant={"Link"}
-                    mt={0}
-                    size={"sm"}
-                    color={"primary.500"}
-                    textDecoration={"underline"}
+                    onPress={ () => dispatch(loadItemsByInventory(props.inventoryName)) }
+                    variant={ "Link" }
+                    mt={ 0 }
+                    size={ "sm" }
+                    color={ "primary.500" }
+                    textDecoration={ "underline" }
                 >
-                    <Text fontSize={"sm"} color={"primary.500"} underline>Load more</Text>
+                    <Text fontSize={ "sm" } color={ "primary.500" } underline>Load more</Text>
                 </Button>
-            )}
-            <Divider my={2} colorScheme={"primary"}/>
+            ) }
+            { isExpanded && isInventoryDataLoading && (
+                <LoadingBox text={ "Loading..." }/>
+            ) }
+            <Divider my={ 2 } colorScheme={ "primary" }/>
 
         </VStack>
     )

src/components/search/SearchForm.tsx

@@ -17 +17 @@
 import MultiSelect from "./MultiSelect"
 import SwitchWithLabel from "./SwitchWithLabel"
 import { log } from "../../logging/logger"
-import { setFilterState } from "../../stores/reducers/listViewSlice"
+import {resetInventories, setFilterState} from "../../stores/reducers/listViewSlice"
 import { SearchParams } from "../../api/searchService"
 
 interface SearchFormProps {
@@ -27 +27 @@
 
 const SearchForm = (props: SearchFormProps) => {
     const [isFilterOpen, setIsFilterOpen] = useState<boolean>(true)
+    const loading = useSelector((state: RootState) => state.listView.loading)
 
     const inventories: Inventory[] = useSelector((state: RootState) => state.searchForm.inventories)
     const nationalities = useSelector((state: RootState) => state.searchForm.nationalities)
@@ -75 +76 @@
             isLowQuality,
             searchQuery: searchQuery,
         }
+        dispatch(resetInventories())
         dispatch(setFilterState(filterState))
         dispatch(search(filterState))
         setIsFilterOpen(false)
@@ -161 +163 @@
                 </Button>
                 { !isFilterOpen && (
                     <Button
+                        isLoading={ loading }
                         borderRadius={ 10 }
                         onPress={ () => searchSubmit() }
                         colorScheme="primary"
@@ -279 +282 @@
                             Reset
                         </Button>
                         <Button
+                            isLoading={ loading }
                             borderRadius={ 10 }
                             onPress={ () => searchSubmit() }
                             colorScheme="primary"

src/stores/reducers/listViewSlice.ts

@@ -32 +32 @@
         resetListView: () => initialState,
         setFilterState: (state, action) => {
             state.filterState = action.payload
+        },
+        resetInventories: (state) => {
+            state.inventories = []
         }
     },
     extraReducers: (builder) => {
@@ -57 +60 @@
             state.data[inventories[0].name] = state.data[inventories[0].name] ? [...prevData, ...data] : [...data]
             state.loading = false
             state.loadedPages[inventories[0].name] = {cursor, items, records}
+            state.inventoriesDataLoading[action.meta.arg] = false
         })
         builder.addCase(loadItemsByInventory.pending, (state, action) => {
             state.inventoriesDataLoading[action.meta.arg] = true
@@ -64 +68 @@
     }
 })
 
-export const { resetListView, setFilterState } = listViewSlice.actions
+export const { resetListView, setFilterState, resetInventories } = listViewSlice.actions
 export default listViewSlice.reducer