ui: add page loading (#274)

packages/ui-default/components/loader/loader.page.styl

@@ -1,3 +1,14 @@
+.page-loader
+  position: absolute
+  top: 0
+  left: 0
+  right: 0
+  bottom: 0
+  display: flex
+  align-items: center
+  justify-content: center
+  z-index: 9999
+
 .loader-container
   position: absolute
   left: 0

packages/ui-default/entry.js

@@ -23,6 +23,9 @@ console.log(
 document.addEventListener('DOMContentLoaded', async () => {
   window.UiContext = JSON.parse(window.UiContext);
 
+  const PageLoader = '<div class="page-loader nojs--hide" style="display:none;"><div class="loader"></div></div>';
+  $('body').prepend(PageLoader);
+  $('.page-loader').fadeIn(500);
   // eslint-disable-next-line camelcase
   try { __webpack_public_path__ = UiContext.cdn_prefix; } catch (e) { }
 

packages/ui-default/hydro.ts

@@ -69,6 +69,7 @@ async function load() {
     shouldDelay: idx < 5, // only animate first 5 sections
     $element: $(section),
   }));
+  $('.page-loader').hide();
   console.log('done! %d ms', new Date().getTime() - start.getTime());
   for (const { $element, shouldDelay } of sections) {
     $element.addClass('visible');