@stoker-platform/web-app 0.5.215 → 0.5.217

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @stoker-platform/web-app
 
+## 0.5.217
+
+### Patch Changes
+
+- fix: fix image height and flicker issues
+
+## 0.5.216
+
+### Patch Changes
+
+- fix: prevent redirect to newly created records before server write completes
+
 ## 0.5.215
 
 ### Patch Changes

package/package.json

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

package/src/Form.tsx

@@ -4183,7 +4183,7 @@ function RecordForm({
                 }
 
                 const onValid = () => {
-                    if (!isServerReadOnly) {
+                    if (!(serverWrite || isServerReadOnly)) {
                         if (onSuccess) onSuccess({ ...recordToSave, id: docId, Collection_Path: path } as StokerRecord)
                     }
                 }
@@ -4211,6 +4211,8 @@ function RecordForm({
 
                         if (isServerReadOnly) {
                             setIsAddingServer(false)
+                        }
+                        if (serverWrite || isServerReadOnly) {
                             if (onSuccess)
                                 onSuccess({ ...recordToSave, id: docId, Collection_Path: path } as StokerRecord)
                         }
@@ -4276,7 +4278,11 @@ function RecordForm({
                     return
                 }
                 const serverWrite = isServerUpdate(collection, { ...recordToSave, id }, userData)
-                const optimisticUpdate = { ...originalRecord, ...cloneDeep(recordToSave) } as StokerRecord
+                const optimisticUpdate = {
+                    ...(originalRecord ?? record),
+                    ...cloneDeep(recordToSave),
+                    id,
+                } as StokerRecord
                 setOptimisticUpdate(labels.collection, optimisticUpdate)
 
                 setGlobalLoading("+", id, serverWrite, !(serverWrite || isServerReadOnly))

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)
         }