Ad

How To Remove This Page Loader?

- 1 answer

I have knowledge in HTML and CSS. But started to work with Shopify Liquid Files (not developing). I installed a theme in my store that has a bar and spinning loader that only displays the page after its completely loaded. And I believe thats not a good thing, so I want to remove it.

I've searched on the pages source code and in some files and the only loaders i've found were the ones from the lazy loading of images. Can you give me directions on where to find the page loader and how to remove it?

Thats the link

Thanks in advance

Ad

Answer

The loader on your page seems to be based on a feature somebody built for your theme that uses classes that include the prto be based on a feature somebody built for your theme that uses classes that include the prefix "nprogress"

Here's the CSS that's specifically showing a white page until something puts the class 'nprogress-done' on the HTML element:

html.nprogress-done::before {
    display: none;
}
html::before {
    content: '';
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

According to the inspector, the above is coming from assets/application.css, which is being served as a minified file.

The classes are probably being placed/removed via Javascript, so if you need to surgically remove this feature from your theme you could either axe those CSS styles or find and remove the Javascript that is controlling those classes.

Ideally though, your theme would have a control in the theme settings that would let you turn the feature on/off less invasively - if you haven't yet, be sure to hit the 'Customize' button next to your theme in your admin and check out what controls you have under 'Theme Settings'. If there isn't a toggle switch for the feature, you could also try reaching out to the theme developer to get one added.

Ad
source: stackoverflow.com
Ad