@stoker-platform/web-app 0.5.194 → 0.5.196

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @stoker-platform/web-app
 
+## 0.5.196
+
+### Patch Changes
+
+- fix: fix image loading spinner issue
+
+## 0.5.195
+
+### Patch Changes
+
+- fix: fix infinite scroll stale records issue
+
 ## 0.5.194
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@stoker-platform/web-app",
-    "version": "0.5.194",
+    "version": "0.5.196",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE.md",
     "scripts": {

package/src/Collection.tsx

@@ -375,9 +375,6 @@ function Collection({
     }, [serverList])
 
     useEffect(() => {
-        if (isAssigning !== undefined) {
-            setBackToStartKey((prev) => prev + 1)
-        }
         if (!relationList || !isInitialized) return
         setFilters((prev) => {
             let next = prev
@@ -397,7 +394,7 @@ function Collection({
             }
             return next
         })
-    }, [isAssigning])
+    }, [isAssigning, isInitialized])
 
     // This is to ensure that the optimistic list is set in cases where cached documents exactly match the downloaded server documents
     // In this case, the cache-only snapshot listener does not fire a second time when the cache has loaded because there is no change to the list

package/src/Images.tsx

@@ -53,31 +53,36 @@ interface RowImageProps {
 
 const RowImage = memo(
     ({ src, alt }: RowImageProps) => {
-        const [isLoaded, setIsLoaded] = useState(false)
+        const imgRef = useRef<HTMLImageElement | null>(null)
+        const [loadedSrc, setLoadedSrc] = useState<string | null>(null)
         const [showSpinner, setShowSpinner] = useState(false)
+        const isLoaded = loadedSrc === src
 
         useEffect(() => {
-            setIsLoaded(false)
+            if (imgRef.current?.complete && imgRef.current.naturalWidth > 0) {
+                setLoadedSrc(src)
+                setShowSpinner(false)
+                return
+            }
             setShowSpinner(false)
             const timer = setTimeout(() => {
-                if (!isLoaded) setShowSpinner(true)
+                setShowSpinner(true)
             }, 500)
             return () => clearTimeout(timer)
         }, [src])
 
-        useEffect(() => {
-            if (isLoaded) setShowSpinner(false)
-        }, [isLoaded])
         return (
             <>
                 <img
+                    key={src}
+                    ref={imgRef}
                     alt={alt}
                     className={cn(
                         "max-w-full max-h-full object-contain rounded-md ease-in-out duration-300 transition-opacity-transform hover:scale-95",
                         { "opacity-0": !isLoaded, "opacity-100": isLoaded },
                     )}
                     src={getSafeUrl(src)}
-                    onLoad={() => setIsLoaded(true)}
+                    onLoad={() => setLoadedSrc(src)}
                 />
                 {!isLoaded && showSpinner && (
                     <div className="absolute inset-0 flex items-center justify-center">
@@ -370,6 +375,8 @@ export const Images = memo(
         const [orderByField, setOrderByField] = useState<string | undefined>(undefined)
         const [orderByDirection, setOrderByDirection] = useState<"asc" | "desc" | undefined>(undefined)
 
+        const infiniteLoaderRef = useRef<InfiniteLoader>(null)
+
         const backToStart = useCallback(
             (
                 latestConstraints?: QueryConstraint[],
@@ -377,6 +384,7 @@ export const Images = memo(
                 latestOrderByDirection?: "asc" | "desc",
             ) => {
                 return new Promise<void>((resolve) => {
+                    infiniteLoaderRef.current?.resetloadMoreItemsCache()
                     setServerList({})
                     setList({})
                     const newQuery = {
@@ -659,6 +667,7 @@ export const Images = memo(
 
         useEffect(() => {
             setIsFirstLoad(true)
+            setPrevIds(new Set())
         }, [filters, orderByField, orderByDirection])
 
         useEffect(() => {
@@ -838,6 +847,7 @@ export const Images = memo(
                 >
                     {!formList && (meta?.title || collectionTitle) && <Meta />}
                     <InfiniteLoader
+                        ref={infiniteLoaderRef}
                         isItemLoaded={(index) => index < itemCount}
                         itemCount={100000}
                         loadMoreItems={loadMoreItems}