Bad UX - Layout Shifting on Page Load

I often have to search for a deal by name.

I click “Deals” on my Bookmarks on the left hand side pane to load the deals page.

The page starts loading, the search box is one of the first widgets to appear - great!

Except above it, there’s a bunch of elements that load later.

These async loading widgets keep shifting the page layout as they load, moving the search box up and down.

This makes it virtually impossible to click on the search box until those widgets finish loading.

If you try to click on the search box while these load, 9/10 times the box moves out from under the mouse pointer just in time for you to click on something else, often a deal, opening another tab.

So the only option is to wait for the entire page to load, defeating the purpose of async loading. Very frustrating when you’re trying to work fast.

This is a common UX anti-pattern on many websites, here is your opportunity to be a technology leader in fixing this :slightly_smiling_face:

Three screenshots showcasing various stages of layout shifts (actualy these don’t do it much justice, some shifts move the box a lot more than this):