Edit Site: Add a loading timeout (#51049)

* Edit Site: Add a loading timeout * Set maximum loading time to 10s
WordPress · Jun 8, 2023 · f6f0523 · f6f0523 · github-actions · Jun 8, 2023
1 parent f1d0bd5
commit f6f0523
Showing 1 changed file with 21 additions and 0 deletions.
diff --git a/packages/edit-site/src/components/layout/hooks.js b/packages/edit-site/src/components/layout/hooks.js
@@ -10,6 +10,8 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import useEditedEntityRecord from '../use-edited-entity-record';
 
+const MAX_LOADING_TIME = 10000; // 10 seconds
+
 export function useIsSiteEditorLoading() {
 	const { isLoaded: hasLoadedPost } = useEditedEntityRecord();
 	const [ loaded, setLoaded ] = useState( false );
@@ -22,6 +24,25 @@ export function useIsSiteEditorLoading() {
 		[ loaded ]
 	);
 
+	/*
+	 * If the maximum expected loading time has passed, we're marking the
+	 * editor as loaded, in order to prevent any failed requests from blocking
+	 * the editor canvas from appearing.
+	 */
+	useEffect( () => {
+		let timeout;
+
+		if ( ! loaded ) {
+			timeout = setTimeout( () => {
+				setLoaded( true );
+			}, MAX_LOADING_TIME );
+		}
+
+		return () => {
+			clearTimeout( timeout );
+		};
+	}, [ loaded ] );
+
 	useEffect( () => {
 		if ( inLoadingPause ) {
 			/*