Skip to content

Layout Shift In Media Gallery Components #8100

@abdullahqusim

Description

@abdullahqusim

Description

When sending a message which contains a media gallery component, it causes weird layout shift behavior if the image's width is too high.

I've tried experimenting with different image dimensions and I believe this only occurs if the image aspect ratio exceeds specifically 11:7.

I've attached a video showing an image of exactly 11:7 aspect ratio and an image which is 1px wider.

Screen.Recording.2026-01-30.at.00.05.05.mov

The former shows the following:

  • Loading placeholder
  • Image shows when available

The latter shows the following:

  • Loading placeholder
  • Component completely disappears
  • Image shows when available

I should note that I have only tested and arrived at this specific aspect ratio for the Discord desktop client on macOS. I believe the aspect ratio limit on mobile is different (and perhaps other clients too?), but I haven't gone into that as of yet.

Steps to Reproduce

Send a POST request to https://discord.com/api/v10/channels/{channel_id}/messages with the following body:

  {
      "flags": 32768,
      "components": [
          {
              "type": 12,
              "items": [{
                  "media": {
                      "url": "https://placehold.co/1101x700.webp?q=1"
                  }
              }]
          }
      ]
  }

I threw in a query parameter to the url as this behavior doesn't occur if the image has already been processed by Discord's proxy service.

Expected Behavior

No layout shift should occur. Obviously, this isn't possible with very wide images, but at the very least the component shouldn't completely disappear before the media appears.

Ideally, the option to provide an explicit width and height for the loading placeholder would make the loading placeholder to image display transition seamless instead of always using a 1:1 image. This could be done by allowing the width and height fields on unfurled media items settable by developers.

Image

Current Behavior

Layout shift occurs. See above.

Screenshots/Videos

See above.

Client and System Information

Discord desktop app on macOS Tahoe 26.2.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions