-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Description
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.
Current Behavior
Layout shift occurs. See above.
Screenshots/Videos
See above.
Client and System Information
Discord desktop app on macOS Tahoe 26.2.