[WC-3477] Do not render image when the image is not available

[r0b1n]

Pull request type

Bug fix (non-breaking change which fixes an issue)

---

Description

The image widget never checked that value is not available while the image is loading, this made it start fetching images with the url /undefined. this change fixes it by not rendering the widget id the image (and fallback) is not available or still loading.

[github-actions]

AI Code Review

⚠️ Approved with suggestions — low-severity items only, safe to merge

---

What was reviewed

File	Change
packages/pluggableWidgets/image-web/src/Image.tsx	Extracted getImageProps to its own module; added image ? ... : null guard
packages/pluggableWidgets/image-web/src/utils/getImageProps.ts	New utility — handles Loading state for both main image and fallback
packages/pluggableWidgets/image-web/src/utils/__tests__/getImageProps.spec.ts	New spec file covering all Mendix data states
packages/pluggableWidgets/image-web/CHANGELOG.md	[Unreleased] entry for the fix
packages/pluggableWidgets/image-web/package.json	Added missing @mendix/widget-plugin-test-utils devDependency

Skipped (out of scope): pnpm-lock.yaml

CI checks were not available at review time — please confirm they are green before merging.

---

Findings

⚠️ Low — loadingDynamic should use the dynamic builder with a flag, or be noted as a gap

File: packages/pluggableWidgets/image-web/src/utils/__tests__/getImageProps.spec.ts line 7
Note: The test file defines a local loadingDynamic helper that constructs a DynamicValue in Loading state with value: undefined by building a raw object. The project convention is to use builders from @mendix/widget-plugin-test-utils. The existing dynamic() function does not support this case (passing undefined forces Unavailable), which is why the helper was added — that's a legitimate gap. Consider either:

1. Documenting the gap with a comment explaining why dynamic() can't be used here, or
2. Opening a follow-up to add dynamic<T>(undefined, true) support (or a loadingDynamic export) to widget-plugin-test-utils so other widgets don't duplicate this workaround.

---

⚠️ Low — Falsy check on image will also suppress empty strings

File: packages/pluggableWidgets/image-web/src/Image.tsx line 17
Note: return image ? (...) : null treats an empty string as a no-render condition (empty string is falsy in JS). For type: "image" datasources an empty URL is effectively invalid, so in practice this is fine. But using image !== undefined would be semantically clearer about the intent (skip only when no image was resolved) and future-proof against a type: "icon" case where an empty class string could ever be returned.

// more explicit:
return image !== undefined ? (
    <ImageComponent ... />
) : null;

---

Positives

• Root cause correctly identified: the old code fell through to { image: undefined } during the Loading state, causing the browser to fetch /undefined. The fix targets exactly this case.
• getImageProps is cleanly extracted into its own module, making it independently testable without mounting a full React tree.
• Test coverage is thorough: all three datasource branches are covered with Available, Loading (with and without a cached URI), Unavailable, and unset inputs.
• The Loading-with-cached-URI case ("returns the main image URI when main image is loading (uri present)") shows the fallback behaviour for data refreshes is preserved — the old image stays visible while the new one loads.
• CHANGELOG entry is user-facing and describes the visible behaviour change, not the implementation detail.
• @mendix/widget-plugin-test-utils was correctly added to devDependencies — it was used in tests but previously missing from package.json.