@stoker-platform/web-app 0.5.195 → 0.5.197

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @stoker-platform/web-app
 
+## 0.5.197
+
+### Patch Changes
+
+- feat: use maximum date range for preloaded relation lists
+
+## 0.5.196
+
+### Patch Changes
+
+- fix: fix image loading spinner issue
+
 ## 0.5.195
 
 ### Patch Changes

package/package.json

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

package/src/Collection.tsx

@@ -1042,7 +1042,10 @@ function Collection({
                     tabRef.current = "list"
                 }
             }
-            if (rangeSelectorState) {
+            if (isPreloadCacheEnabled && relationList) {
+                setRangeSelector("range")
+                rangeSelectorState = "range"
+            } else if (rangeSelectorState) {
                 setRangeSelector(rangeSelectorState as "range" | "week" | "month" | undefined)
                 setState(`collection-range-selector-${labels.collection.toLowerCase()}`, "selector", rangeSelectorState)
             }
@@ -1072,6 +1075,12 @@ function Collection({
                             from: getMinDate(),
                             to: getMaxDate(),
                         })
+                    } else if (isPreloadCacheEnabled && relationList) {
+                        const preloadCacheRange = getRange(preloadCache.range, timezone)
+                        rangeValue = JSON.stringify({
+                            from: preloadCacheRange.start.toISOString(),
+                            to: preloadCacheRange.end?.toISOString(),
+                        })
                     } else if (!rangeValue) {
                         const now = convertDateToTimezone(new Date())
                         if (rangeSelectorState === "month") {

package/src/DateRange.tsx

@@ -277,8 +277,17 @@ export function DateRangeSelector({
                                         ) : (
                                             <span>Pick a date</span>
                                         )
+                                    ) : range?.from ? (
+                                        range.to ? (
+                                            <>
+                                                {DateTime.fromJSDate(range.from).toFormat("d/M/yy")} -{" "}
+                                                {DateTime.fromJSDate(range.to).toFormat("d/M/yy")}
+                                            </>
+                                        ) : (
+                                            DateTime.fromJSDate(range.from).toFormat("d/M/yy")
+                                        )
                                     ) : (
-                                        <span>Change date range</span>
+                                        <span>Pick a date</span>
                                     )}
                                 </>
                             )}

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">