Avoid flicker before initial filtering (load)

[gusvd]

When I load my page, all the items flicker for a split second before mixitup triggers their initial filtering. Is there a way to avoid that?

I'm passing the initial filtering via URL query string, parsing it and passing it as the initial filter.

////////////////////////////////////////////////////
// MixItUp

// Get initial filter from URL
var searchLocation = "." + getParameterByName('search-location');
var searchDate = "." + getParameterByName('search-date');
var initFilter = searchLocation + searchDate;

// Initialize MixItUp
var containerEl = document.querySelector('.listings-container');
var config = {
    animation: {
        duration: 300
    },
    selectors: {
        target: '.listings-card'
    },
    load: {
        filter: initFilter,
        sort: 'departure-date:asc' 
    },
    controls: {
        toggleDefault: 'none'
    },
    multifilter: {
        enable: true
    }
};

var mixer = mixitup(containerEl, config);

// Pass initial filters to change the Select fields accordinly
mixer.setFilterGroupSelectors('location', searchLocation);
mixer.setFilterGroupSelectors('date', searchDate);

[patrickkunka]

Hello - please take a look at the solution I provided to this issue: https://github.com/patrickkunka/mixitup/issues/480

I'm guessing the problem is to do with you using the load.filter config option and the .setFilterGroupSelectors() API method together. When you are using MultiFilter, you should only use the latter.

To avoid the flicker, instantiate MixItUp with animations disabled, then re-enable animations via config, after you've called the setFilterGroupSelectors() API.

[gusvd]

Thanks Patrick, I had seen the issue #480 and tried that solution, but unfortunately it didn't fix it.

For what I've seen, the problem is the DOM loads completely with all my .mix elements visible. It takes a split second for the MixItUp script to initialise and hide the .mix elements that need to be hidden.

That very small delay is causing all my items to flick before MixItUp can hide them.

Is there a way tell MixItUp to start with all the .mix hidden and only show the relevant ones?

[patrickkunka]

Hey - ah yes I understand

I think this is the approach you need: https://demos.kunkalabs.com/mixitup/loading-animation/

(you can remove the animation part if you don't want it)