Image placeholders should use stored dimensions to reduce layout shift

[reddpy]

When images load in the editor, they start as a fixed 320x180 spinner placeholder, then jump to their actual dimensions once loaded. This causes layout shift (content below jumps around).

The ImageNode already serializes width and height — once a user has resized an image or it has loaded at least once, these values are in the JSON. The placeholder/spinner div should use these stored dimensions via inline style instead of the fixed CSS size.

Files:

• src/components/editor/nodes/image-component.tsx — apply width/height to .image-placeholder div when available

Before:

<div className="image-placeholder">

After:

<div
  className="image-placeholder"
  style={width && height ? { width: `${width}px`, height: `${height}px` } : undefined}
>

Same for the error placeholder.

[dharmateja03]

Hi @reddpy , I’d like to work on this issue. Please assign it to me if it’s available.

[reddpy]

@dharmateja03 will assign soon, working on the backend hardening with tests. once that is done (next 24hrs), will assign

[reddpy]

@dharmateja03 would you mind taking a look at #67 ?? this one is high leverage. running the e2e tests you'll receive failure feedback.

[reddpy]

@dharmateja03 assigned to you, ensure you're running the test suite before making a PR