From 4fad7a20bda6dfd7ecccf142a6510b40aa3d104a Mon Sep 17 00:00:00 2001
From: pandadtdyy <panda_dtdyy@outlook.com>
Date: Fri, 24 Dec 2021 16:43:43 +0800
Subject: [PATCH] ui: add page loading (#274)

---
 .../ui-default/components/loader/loader.page.styl     | 11 +++++++++++
 packages/ui-default/entry.js                          |  3 +++
 packages/ui-default/hydro.ts                          |  1 +
 3 files changed, 15 insertions(+)

diff --git a/packages/ui-default/components/loader/loader.page.styl b/packages/ui-default/components/loader/loader.page.styl
index a243a9239..9cb9e7441 100644
--- a/packages/ui-default/components/loader/loader.page.styl
+++ b/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
diff --git a/packages/ui-default/entry.js b/packages/ui-default/entry.js
index 9622b1223..5b3026eb7 100644
--- a/packages/ui-default/entry.js
+++ b/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) { }
 
diff --git a/packages/ui-default/hydro.ts b/packages/ui-default/hydro.ts
index ea0b89f6d..6d9034156 100644
--- a/packages/ui-default/hydro.ts
+++ b/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');