Image preview in string prop control #4890
Conversation
Job #10440: Bundle Size — 61.74MiB (~+0.01%).
Warning Bundle contains 57 duplicate packages – View duplicate packages Bundle metrics
 
Bundle size by type
View job #10440 report View feature/image-preview-string-con... branch activity View project dashboard |
|
Performance test results: |
editor/src/core/shared/file-utils.ts
Outdated
| @@ -259,3 +259,8 @@ export function isCssFile(filename: string): boolean { | |||
| export function isJsOrTsFile(filename: string): boolean { | |||
| return isJsFile(filename) || isTsFile(filename) | |||
| } | |||
|
|
|||
| export function isImageUrl(url: string): boolean { | |||
There was a problem hiding this comment.
there's also isImage function, we might be able to unify them
utopia/editor/src/core/shared/utils.ts
Lines 212 to 214 in 3f73ea8
| url: string | ||
| } | ||
| const ImagePreview = React.memo((props: ImagePreviewProps) => { | ||
| const [imageCanBeLoaded, setImageCanBeLoaded] = React.useState(true) |
There was a problem hiding this comment.
won't that always start with true on every re-render (even if the url hadn't changed) and so it will always first try to the render the <img> even if the url is bad?
There was a problem hiding this comment.
it would start with true on every re-mount, but not on every re-render
There was a problem hiding this comment.
What Balazs wrote and when the url is bad we don't even mount the ImagePreview (see line 465)
But I can integrate that check into the ImagePreview component itself (by initializing imageCanBeLoaded with isImageUrl(url))
There was a problem hiding this comment.
yes, of course, re-mount was what I meant 🤦♂️ in any case it's not critical at all
Description:
Simple image preview for string property controls: it shows the image when the string property is a url.