Skip to content

Improve layout shift caused by pattern previews loading in the inserter menus. #27494

@talldan

Description

@talldan

Is your feature request related to a problem? Please describe.
Related #27493

Using the search input in inserter menus can cause quite a lot of layout shift as the pattern previews load asynchronously.

This seems more noticeable in the Quick Inserter menu which has a smaller space. It's particularly noticeable when the popover is positioned above the inserter button, as the patterns cause everything above them to shift up and down.

Try:

  1. Adding enough content so that the trailing appender button is at the bottom of the screen.
  2. Clicking the trailing appender and then searching for random terms
  3. Notice how pattern previews don't display immediately, and when there's more than one the content can shift up and down a couple of times.

Describe the solution you'd like
Add some kind of loading placeholder to patterns. While we don't know ahead of time what size the preview will be, an approximate sized placeholder would help. Currently the preview is zero height when loading, and then it shifts to potentially 100-200px. The amount of shift could be reduced.

The placeholder aspect ratio could also be part of a pattern config if we'd like to be more precise, or alternatively the previous size could be cached and used for the placeholder so that the shift only happens the first time searching.

Describe alternatives you've considered
Couldn't think of any.

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Feature] InserterThe main way to insert blocks using the + button in the editing interface[Feature] PatternsA collection of blocks that can be synced (previously reusable blocks) or unsynced[Type] EnhancementA suggestion for improvement.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions