diff --git a/src/hooks/useAsyncValue.ts b/src/hooks/useAsyncValue.ts index d46bfaf9..d22e6356 100644 --- a/src/hooks/useAsyncValue.ts +++ b/src/hooks/useAsyncValue.ts @@ -40,10 +40,24 @@ import { useAsyncCallback, type AsyncCallbackState } from './useAsyncCallback'; export const useAsyncValue = , R>( callback: ( ...args: Array ) => Promise, deps: DependencyList -): AsyncCallbackState => { +): AsyncCallbackHookResult => { const [ asyncCallback, asyncState ] = useAsyncCallback( callback ); useInstantEffect( asyncCallback, deps ); + // There might be short delay between the effect and the state update. + // So it is possible that the status is still 'idle' after the effect. + // In such case, we should return 'loading' status because the effect is already queued to be executed. + if ( asyncState.status === 'idle' ) { + return { + status: 'loading' + }; + } + return asyncState; }; + +/** + * The result of the `useAsyncValue` hook. + */ +type AsyncCallbackHookResult = Exclude, { status: 'idle' }>; diff --git a/tests/cloud/withCKEditorCloud.test.tsx b/tests/cloud/withCKEditorCloud.test.tsx index b3ac4252..849154a7 100644 --- a/tests/cloud/withCKEditorCloud.test.tsx +++ b/tests/cloud/withCKEditorCloud.test.tsx @@ -75,7 +75,7 @@ describe( 'withCKEditorCloud', () => { deferredPlugin.resolve( 123 ); expect( await findByText( 'Your Editor 1' ) ).toBeVisible(); - expect( lastRenderedMockProps.current?.cloud.CKPlugins?.Plugin ).toBe( 123 ); + expect( lastRenderedMockProps.current?.cloud.loadedPlugins?.Plugin ).toBe( 123 ); } ); it( 'should show error message when cloud loading fails', async () => { diff --git a/tsconfig.json b/tsconfig.json index 6fbb5e49..f9b9ef71 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -10,7 +10,8 @@ "DOM.Iterable" ], "types": [ - "./vite-env.d.ts" + "./vite-env.d.ts", + "@testing-library/jest-dom/vitest" ], "skipLibCheck": true, "jsx": "react",