Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-03-17 22:31:28 -05:00
Code Issues Activity

refactor(ui): add debounced loading (#692)

Browse source 
* refactor(ui): add debounced loading

add debounced loading

* fix(ui): cr fix

cr fix
This commit is contained in:
simeng-li 2022-04-29 11:48:21 +08:00 • committed by GitHub
parent 731ff1cbdc
commit e761be6756
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
packages/ui/package.json
View file

@ -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"
}
}

4
packages/ui/src/components/AppContent/index.tsx
View file

@ -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>
);
};

12
pnpm-lock.yaml generated
View file

@ -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: