添加了Bigcommerce Stencil JS程序包加载较晚

Question

Developing a custom Stencil theme for an upcoming Bigcommerce store and am running into a few issues. I'm relatively new to the JS module-loading/ES6 concepts but have added a few additional JS packages via jspm (as included in Stencil). The problem I am running in to is that these new packages don't work their magic until the page is fully rendered. So, for instance, I am using a modal pop-up package, animatedModal.js, which is a jQuery package. It's installed, it's working, but no matter where I instantiate the package in the module loader, the modal content shows on the page for about 2s before being hidden and working as it should. Same goes for anothe jQuery package, mmenu, I am using for navigation.

This isn't even a FOUC, as it seems that these plugins aren't even being run, as I said, until the page is fully rendered. I would expect to never see the modal that animatedModal.js is working on or to see the navigation rendered before being hidden by mmenu. Do I need to instantiate the packages differently since we are using System.js/Babel/es6-module-loader/etc.?

Currently, once the package is installed, I create a js file in /js/theme/global for the particular package, for instance, to use animatedModal.js I created /js/theme/global/animated-modal.js:

import $ from 'jquery';
import 'joaopereirawd/animatedModal.js';

export default function() {
    $("#loginLink").animatedModal();
}

Then, in /js/theme/global.js I call this function/module:

import initializeModals from './global/animated-modal';

export default class Global extends PageManager {
    // ...
    loaded(next) {
        initializeModals();
        // ...
    }
}

Again, this all works as it should, but the time it takes to load a page is quite long, and all these elements show on the page for about 2s before being hidden and "working," such as the modal being hidden and clickable or the navigation showing on-page before being hidden and usable.

Any community thoughts out there?

Answer 1

Why do you say this is not FOUC? The javascript it being initialized at the bottom of the HTML template, so of course the modules/functions don't run until the page has rendered to that point. This means your HTML will display as it would before the javascript kicks in and hides it. You need to hide the content yourself with CSS. Then the js will take over once it's loaded.