Handle Lazy Loading, preloaders and other regular modern website features

[clonefunnels]

It would be better if we could use templates that are more modern and GrapesJS could handle them instead of missing sections of content because it can't handle lazy loading, preloaders, or other Bootstrap CSS. If you can't make GrapesJS handle real world modern designs then maybe you could at least do something to bypass them so the content can still be edited in the editor instead of missing because the editor only sees things like display:none or opacity:0.

UPDATE:
If anyone else has this issue you can resolve it for SOME templates with this:

editor.on('load',
function() {
const head = editor.Canvas.getDocument().head;
head.insertAdjacentHTML('afterbegin', <style>.gjs-dashed [data-gjs-highlightable] { opacity: 1 !important; } *, ::after, ::before { opacity: 1 !important; }</style>,);
});

That won't make it work the way it should. But it will make the content visible when templates set opacity:0 on lazy load, etc. It won't resolve templates that use display:none during lazy load, etc.

To hide preloaders here is a CSS file you can also include....

.preloader {display:none !important; opacity:0 !important;}
#preloader {display:none !important; opacity:0 !important;}
#spinner {display:none !important; opacity:0 !important;}
.spinner {display:none !important; opacity:0 !important;}
.spinner-grow {display:none !important; opacity:0 !important;}
.js-preloader {display:none !important; opacity:0 !important;}
#js-preloader {display:none !important; opacity:0 !important;}
#page-loader {display:none !important; opacity:0 !important;}
.page-loader {display:none !important; opacity:0 !important;}
#loader {display:none !important; opacity:0 !important;}
.loader {display:none !important; opacity:0 !important;}
.ftco-loader {display:none !important; opacity:0 !important;}
#ftco-loader {display:none !important; opacity:0 !important;}
#doc-loader {display:none !important; opacity:0 !important;}
.doc-loader {display:none !important; opacity:0 !important;}
#preloader-active {display:none !important; opacity:0 !important;}
.preloader-active {display:none !important; opacity:0 !important;}
#pswp__preloader {display:none !important; opacity:0 !important;}
.pswp__preloader {display:none !important; opacity:0 !important;}
.preloader-wrapper {display:none !important; opacity:0 !important;}
.preloader-inner {display:none !important; opacity:0 !important;}
.nav-toggle-overlay {display:none !important; opacity:0 !important;}
.loading-overlay {
display: none !important;
opacity: 0 !important;
}
#loading {
display: none !important;
opacity: 0 !important;
}
.loading {
display: none !important;
opacity: 0 !important;
}
.ftco-loader {
display: none;
}
#preloader {
display: none !important;
opacity: 0 !important;
}
.loader {
display: none !important;
opacity: 0 !important;
}
#loader {
display: none !important;
opacity: 0 !important;
}
.preloader {
display: none !important;
opacity: 0 !important;
}
#preloder {
display: none !important;
opacity: 0 !important;
}
.loder {
display: none !important;
opacity: 0 !important;
}
.preloder {
display: none !important;
opacity: 0 !important;
}
#loder {
display: none !important;
opacity: 0 !important;
}
#preloader-active {
display: none !important;
opacity: 0 !important;
}

.ftco-loader {
display: none !important;
opacity: 0 !important;
}
#global-loader {
display: none !important;
opacity: 0 !important;
}
.global-loader {
display: none !important;
opacity: 0 !important;
}