category filter causes page to "jump" / "flicker" on mobile causing layout shift

[Horizon]

With the Filter plugin in the sidebar on desktop which becomes the top on mobile, on my android phone the category filter at the top causes the page to "jump" or "flicker" with each page change.

As the page loads, the category filter is extended, and then it "almost" instantly folds up/hides to show the page content. So it's like the page content jumps up the full screen height as the category filter has to hide a moment after the page loads. Lighthouse reports:

With Filter Plugin Enabled:
Cumulative Layout Shift: 0.666

With Filter Plugin Disabled:
Cumulative Layout Shift: 0.013


Is there a way to have the filter plugin at the top in mobile (position sidebar on desktop) but reduce the mobile layout shift? Is there any way to fold it up / hide it more quickly on page load so the whole layout doesn't have to shift with each page change?

[Horizon]

I guess the problem in a nutshell is that on desktop the layout is

----------------
Left aside (contains Filter Plugin) | Body
----------------


On mobile, there is javascript I believe (?) which does a nice bit of magic and looks great, but it creates the layout shift making


Filter Plugin (adds display:none and expander to change to display:block)
----------------
Body
----------------
Rest of Left aside (adds second-copy to class and splits from Filter Plugin part of left aside, I believe)


I'm not quite sure how to improve the layout shift here which is taking away about 16% of the mobile performance score since the javascript loads as the page loads and is modifying both the filter plugin space I believe and then adding the "second-copy" to the rest of left aside if you have anything else there which also then creates a layout shift.

I think it might be improved by adding a display:none to the sidebar space under mobile/tablet css, changing the filter plugin javascript slightly for the expander, and then adding a javascript to show my second-copy left aside content upon page load completion, but then the second-copy left aside content wouldn't help SEO, which might be ok (I believe the display:none sections wouldn't create a penalization but would simply be ignored for SEO, I believe)

[Horizon]

Maybe another way to do this is to change the flex order by adding order 2 to the left column when on mobile to move it to the right which becomes below the body.

Then the layout shift becomes near zero on mobile and the mobile page performance report really increases.

And no layout shift viewing on an android phone.

Only problem is category filter then ends up a the bottom of the page, so the mechanism the splits the second-copy left aside would have to be changed to move the filter to the top (display:none in css to hide by default the content of the filter box.)

I think this would work, but might require a customization to figure out the javascript change.

[Horizon]

Any tips on how/where

Only registered members can view the code.

gets changed to

Only registered members can view the code.

And any any tips on how/where

Only registered members can view the code.

gets changed to

Only registered members can view the code.

on mobile?

Seems like this is javascript but I'm not sure where the magic is happening.

[Horizon]

As to why I'm asking: if you set the sidebarspace to display:none in css for mobile, it really helps the layout shift report, but then the expander is backwards +/-, so need to figure that out.

On the second question, if I change the flex order, I'm wondering if I can use the same mechanism that adds the second-copy to the class on mobile to move the Filter up to the top despite the changed flex order of the left aside.

If I could get those two things working, it could be a 16% increase in lighthouse performance on mobile.

[Horizon]

OK, got a 16% improvement in the lighthouse mobile score:
1.) add css to tablet/mobile to set sidebarspace display:none on mobile/tablet so it's display none on first page load before javascript; this solves the layout shift issue.
2.) To keep my non Filter side blocks visible, edit side_block_header and add ID BlockName to sidebarspace; add sidebarspacevisible display:block to tablet/mobile css
3.) add to footerscript tpl javascript to change class for the other sidebar block so that it will be display none as page loads and then display block after page is complete

Only registered members can view the code.

Seems to work well in testing so far.

Then I changed the expander in css where expander is right and expander active is 0. Just swapping the position of the image so the expander shows correctly.

A little concerning how I've added some complexity to do the same, but it does solve the flicker problem on android phones and gives a 16% improvement in the lighthouse score, so I think I'll call this a success.

I feel a little older now than when I started this thread a day ago