@stoker-platform/web-app 0.5.212 → 0.5.214

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @stoker-platform/web-app
 
+## 0.5.214
+
+### Patch Changes
+
+- fix: fix Safari form image flicker
+
+## 0.5.213
+
+### Patch Changes
+
+- fix: fix collection change UI flicker
+
 ## 0.5.212
 
 ### Patch Changes

package/package.json

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

package/src/Collection.tsx

@@ -2051,6 +2051,9 @@ function Collection({
                                         relationList ? "xl:flex-row" : "lg:flex-row",
                                     )}
                                 >
+                                    {!isInitialized && !relationList && (
+                                        <div className="hidden lg:block h-9 shrink-0" aria-hidden="true" />
+                                    )}
                                     {isInitialized && (
                                         <>
                                             {formList && (

package/src/utils/getFormattedFieldValue.tsx

@@ -14,10 +14,37 @@ import { Check, X } from "lucide-react"
 import { LoadingSpinner } from "@/components/ui/loading-spinner"
 import { Button } from "@/components/ui/button"
 import { preloadCacheEnabled } from "./preloadCacheEnabled"
-import { useState } from "react"
+import { useEffect, useRef, useState } from "react"
 import { cn } from "@/lib/utils"
 import { getSafeUrl } from "./isSafeUrl"
 
+const FormattedFieldImage = ({ src, alt, form }: { src: string; alt?: string; form?: boolean }) => {
+    const imgRef = useRef<HTMLImageElement | null>(null)
+    const [loadedSrc, setLoadedSrc] = useState<string | null>(null)
+    const isLoaded = loadedSrc === src
+
+    useEffect(() => {
+        if (imgRef.current?.complete && imgRef.current.naturalWidth > 0) {
+            setLoadedSrc(src)
+        }
+    }, [src])
+
+    return (
+        <img
+            ref={imgRef}
+            src={getSafeUrl(src)}
+            alt={alt || ""}
+            decoding="async"
+            onLoad={() => setLoadedSrc(src)}
+            className={cn(
+                isLoaded ? "opacity-100" : "opacity-0",
+                form ? "max-h-[300px]" : "max-h-[60px]",
+                "transition-opacity duration-200 ease-in-out max-w-full object-contain rounded",
+            )}
+        />
+    )
+}
+
 export const getFormattedFieldValue = (
     customization: CollectionCustomization,
     field: CollectionField,
@@ -120,22 +147,6 @@ export const getFormattedFieldValue = (
         }
     }
 
-    const Image = ({ src, alt }: { src: string; alt?: string }) => {
-        const [loaded, setLoaded] = useState(false)
-        return (
-            <img
-                src={getSafeUrl(src)}
-                alt={alt || ""}
-                onLoad={() => setLoaded(true)}
-                className={cn(
-                    loaded ? "opacity-100" : "opacity-0",
-                    form ? "max-h-[300px]" : "max-h-[60px]",
-                    "transition-opacity duration-300 ease-in-out max-w-full object-contain rounded",
-                )}
-            />
-        )
-    }
-
     if (modified) {
         if (value === "tick") {
             return (
@@ -234,7 +245,7 @@ export const getFormattedFieldValue = (
                 if (image) {
                     return (
                         <div className="w-full min-w-[100px]">
-                            <Image src={value} alt={field.name} />
+                            <FormattedFieldImage src={value} alt={field.name} form={form} />
                         </div>
                     )
                 }

package/src/utils/runViewTransition.ts

@@ -1,8 +1,13 @@
 import { flushSync } from "react-dom"
 
+const isWebKit =
+    typeof navigator !== "undefined" &&
+    /AppleWebKit/.test(navigator.userAgent) &&
+    !/Chrom(e|ium)|Edg|OPR|Android/.test(navigator.userAgent)
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const runViewTransition = (callback: () => any) => {
-    if (document.startViewTransition && document.visibilityState === "visible") {
+    if (!isWebKit && document.startViewTransition && document.visibilityState === "visible") {
         try {
             const transition = document.startViewTransition(() => {
                 flushSync(() => {