From e761be67560b1a0f30276419b39d2de0c9e96b94 Mon Sep 17 00:00:00 2001
From: simeng-li <simeng@silverhand.io>
Date: Fri, 29 Apr 2022 11:48:21 +0800
Subject: [PATCH] refactor(ui): add debounced loading (#692)

* refactor(ui): add debounced loading

add debounced loading

* fix(ui): cr fix

cr fix
---
 packages/ui/package.json                        |  5 ++++-
 packages/ui/src/components/AppContent/index.tsx |  4 +++-
 pnpm-lock.yaml                                  | 12 ++++++++++++
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/packages/ui/package.json b/packages/ui/package.json
index c6fe0e4f4..6acf577ec 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -66,5 +66,8 @@
   "stylelint": {
     "extends": "@silverhand/eslint-config-react/.stylelintrc"
   },
-  "prettier": "@silverhand/eslint-config/.prettierrc"
+  "prettier": "@silverhand/eslint-config/.prettierrc",
+  "dependencies": {
+    "use-debounced-loader": "^0.1.1"
+  }
 }
diff --git a/packages/ui/src/components/AppContent/index.tsx b/packages/ui/src/components/AppContent/index.tsx
index f5dd793c3..7be394a02 100644
--- a/packages/ui/src/components/AppContent/index.tsx
+++ b/packages/ui/src/components/AppContent/index.tsx
@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import React, { ReactNode, useCallback, useContext } from 'react';
+import { useDebouncedLoader } from 'use-debounced-loader';
 
 import LoadingLayer from '@/components/LoadingLayer';
 import Toast from '@/components/Toast';
@@ -15,6 +16,7 @@ export type Props = {
 const AppContent = ({ children }: Props) => {
   const theme = useTheme();
   const { toast, loading, setToast } = useContext(PageContext);
+  const debouncedLoading = useDebouncedLoader(loading);
 
   // Prevent internal eventListener rebind
   const hideToast = useCallback(() => {
@@ -25,7 +27,7 @@ const AppContent = ({ children }: Props) => {
     <main className={classNames(styles.content, styles.universal, styles.mobile, styles[theme])}>
       {children}
       <Toast message={toast} isVisible={Boolean(toast)} callback={hideToast} />
-      {loading && <LoadingLayer />}
+      {debouncedLoading && <LoadingLayer />}
     </main>
   );
 };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 670aac2a1..dbc488220 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -853,6 +853,9 @@ importers:
       react-timer-hook: ^3.0.5
       stylelint: ^13.13.1
       typescript: ^4.6.2
+      use-debounced-loader: ^0.1.1
+    dependencies:
+      use-debounced-loader: 0.1.1_react@17.0.2
     devDependencies:
       '@logto/jest-config': link:../jest-config
       '@logto/phrases': link:../phrases
@@ -19519,6 +19522,15 @@ packages:
       react: 17.0.2
     dev: true
 
+  /use-debounced-loader/0.1.1_react@17.0.2:
+    resolution: {integrity: sha512-FbY/ynor7wZV55v1EvvAvu8CvSoEKT1azS2zFb/aLlL0vySbqTM7x9fIcaOJN++E52mVINNDe2VmWWd+Q00S+A==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: '>=16'
+    dependencies:
+      react: 17.0.2
+    dev: false
+
   /use-isomorphic-layout-effect/1.1.2_cfedea9b3ed0faf0dded75c187406c5e:
     resolution: {integrity: sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==}
     peerDependencies: