So I was fed up with the loading bar, and wanted a more UX friendly way to show that Bubble was up to something with my data or workflow etc.. so I have this, no blue bar loading.
I added an html element to the page and have a little JavaScript running observing for when Bubble dynamically injects its loading bar with “#nprogress” and watch for the presents of it, or not.
Then with the toolbox plugin I wait for the JavaScript to bubble events to fire off and use the notifier plugin with a loading message and trigger the success message (blank) once its done.
This is nice for use (in this case) with auto binding enabled because you don’t need to do anything other than have this running on the page. It can be a pain when you want to give your users feedback that something has happened, and even when Bubble does something in the background it will show there is activity.
I also hide with css the Bubble loader. (blue bar at the top of the page)
here is the code:
<style>
#nprogress { visibility: hidden; }
</style>
<script>
(function() {
var fnName = 'loading';
var lastState = null;
function fire(state) {
console.log('[DEBUG] nprogress state:', state);
if (lastState === state) return;
lastState = state;
if (window['bubble_fn_' + fnName]) {
console.log('[DEBUG] Calling bubble_fn_' + fnName + ' with:', state);
window['bubble_fn_' + fnName](state);
} else {
console.log('[DEBUG] bubble_fn_' + fnName + ' not defined');
}
}
function checkBar() {
var nBar = document.getElementById('nprogress');
var visible = false;
if (nBar) {
visible = window.getComputedStyle(nBar).display !== 'none';
}
fire(visible);
}
// Observe DOM changes globally (childList/attributes)
var observer = new MutationObserver(function() {
checkBar();
});
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
// Initial check
checkBar();
})();
</script>
Plugins:
Toolbox: Toolbox Plugin | Bubble
Notifier: Toast Notifications Plugin | Bubble
)
