[Resolved] Toolset Masonry View is flickering during the loading of the page

[Author]

Posts

[nathanB-3]

Toolset masonry view is flickering during the loading of the page causing a bad user experience and high content layout shift.

You can see how the flickering works in the screenshot, a live example is hidden link

I wonder what library toolset views is using for masonry, if there is a fix or a way to add a nice animation when elements appear on the screen.

[Jamal]

Hello and thank you for contacting the Toolset support.

Toolset uses its own code for the masonry layout. It does not use any popular library for that.

I can see the issue, especially when browsing to the next page of the view. So, I'll suggest that you use the view's events to implement some kind of "hide-until-it-is-ready" solution. For example, you can add a custom style(based on a class selector), that will hide the contents of the view until the results are loaded and added to the page.
https://toolset.com/documentation/programmer-reference/adding-custom-javascript-code-to-views-that-use-ajax/

Something like:

jQuery( document ).on( 'js_event_wpv_parametric_search_started', function( event, data ) {
	/**
	* data.view_unique_id (string) The View unique ID hash
	*/
	// Execute code that will hide the contents
	// For example add a class to the view wrapper div.
});

jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
	/**
	* data.view_unique_id (string) The View unique ID hash
	* data.effect (string) The View AJAX pagination effect
	* data.speed (integer) The View AJAX pagination speed in miliseconds
	* data.layout (object) The jQuery object for the View layout wrapper
	*/
	// Execute code that will show the contents
	// For example remove a class from the view wrapper div.
});

I hope this helps. Let me know if you have any questions.

[nathanB-3]

My issue is resolved now. Thank you!