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",