@stoker-platform/web-app 0.5.216 → 0.5.217

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @stoker-platform/web-app
 
+## 0.5.217
+
+### Patch Changes
+
+- fix: fix image height and flicker issues
+
 ## 0.5.216
 
 ### Patch Changes

package/package.json

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

package/src/Images.tsx

@@ -381,7 +381,7 @@ const Row = ({ index, style, data }: RowProps) => {
                                         </div>
                                     </div>
                                 )}
-                            <div className={cn("grid", "gap-4", size)}>
+                            <div className={cn("grid", "gap-4", "auto-rows-fr", size)}>
                                 {record[imagesConfig.imageField] ? (
                                     <CopyImageOverlay src={record[imagesConfig.imageField]} className="w-full h-full">
                                         <button

package/src/utils/getFormattedFieldValue.tsx

@@ -14,7 +14,7 @@ import { Check, X } from "lucide-react"
 import { LoadingSpinner } from "@/components/ui/loading-spinner"
 import { Button } from "@/components/ui/button"
 import { preloadCacheEnabled } from "./preloadCacheEnabled"
-import { useEffect, useRef, useState } from "react"
+import { useLayoutEffect, useRef, useState } from "react"
 import { cn } from "@/lib/utils"
 import { getSafeUrl } from "./isSafeUrl"
 
@@ -23,7 +23,7 @@ const FormattedFieldImage = ({ src, alt, form }: { src: string; alt?: string; fo
     const [loadedSrc, setLoadedSrc] = useState<string | null>(null)
     const isLoaded = loadedSrc === src
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         if (imgRef.current?.complete && imgRef.current.naturalWidth > 0) {
             setLoadedSrc(src)
         }