Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-06 20:40:08 -05:00
Code Issues Activity

fix(experience): improve the loading experience (#5038)

Browse source 
improve the loading experience
This commit is contained in:
simeng-li 2023-12-01 19:40:59 +08:00 committed by GitHub
parent 527cd22608
commit ba691c5636
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/experience/src/Providers/LoadingLayerProvider/index.tsx
View file

@ -7,7 +7,7 @@ import LoadingLayer from '@/components/LoadingLayer';
const LoadingLayerProvider = () => { const LoadingLayerProvider = () => {
const { loading } = useContext(PageContext); const { loading } = useContext(PageContext);
const debouncedLoading = useDebouncedLoader(loading); const debouncedLoading = useDebouncedLoader(loading, 500);
return ( return (
<> <>

14
packages/experience/src/hooks/use-api.ts
View file

@ -3,16 +3,24 @@ import { useCallback, useContext } from 'react';
import PageContext from '@/Providers/PageContextProvider/PageContext'; import PageContext from '@/Providers/PageContextProvider/PageContext';
const useApi = <Args extends unknown[], Response>(api: (...args: Args) => Promise<Response>) => { type Options = {
silent?: boolean;
};
const useApi = <Args extends unknown[], Response>(
api: (...args: Args) => Promise<Response>,
options?: Options
) => {
const { setLoading } = useContext(PageContext); const { setLoading } = useContext(PageContext);
const request = useCallback( const request = useCallback(
async (...args: Args): Promise<[Nullable<unknown>, Response?]> => { async (...args: Args): Promise<[Nullable<unknown>, Response?]> => {
if (!options?.silent) {
setLoading(true); setLoading(true);
}
try { try {
const result = await api(...args); const result = await api(...args);
return [null, result]; return [null, result];
} catch (error: unknown) { } catch (error: unknown) {
return [error]; return [error];
@ -20,7 +28,7 @@ const useApi = <Args extends unknown[], Response>(api: (...args: Args) => Promis
setLoading(false); setLoading(false);
} }
}, },
[api, setLoading] [api, options?.silent, setLoading]
); );
return request; return request;

7
packages/experience/src/hooks/use-single-sign-on-watch.ts
View file

@ -23,12 +23,11 @@ const useSingleSignOnWatch = (identifierInput?: IdentifierInputValue) => {
const { showSingleSignOnForm, setShowSingleSignOnForm } = useContext(SingleSignOnFormModeContext); const { showSingleSignOnForm, setShowSingleSignOnForm } = useContext(SingleSignOnFormModeContext);
const request = useApi(getSingleSignOnConnectors); const request = useApi(getSingleSignOnConnectors, { silent: true });
const singleSignOn = useSingleSignOn(); const singleSignOn = useSingleSignOn();
/** // Silently check if the email is registered with any SSO connectors
* Silently check if the email is registered with any SSO connectors
*/
const fetchSsoConnectors = useCallback( const fetchSsoConnectors = useCallback(
async (email: string) => { async (email: string) => {
const [, result] = await request(email); const [, result] = await request(email);