AI Client: add logo generator placeholder components (#39244)

* introduce isLoadingHistory on store. Set it from hook and main modal * introduce logo presenter placeholder component while loading the logos * introduce placeholder for history carousel * add changelog entry
Automattic · Sep 4, 2024 · d51169c · d51169c
1 parent 60e50f6
commit d51169c
Show file tree

Hide file tree

Showing 10 changed files with 71 additions and 7 deletions.
diff --git a/projects/js-packages/ai-client/changelog/fix-ai-logo-generator-loading-states b/projects/js-packages/ai-client/changelog/fix-ai-logo-generator-loading-states
@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+AI Client: add placeholders for Logo Generator modal commponents
diff --git a/projects/js-packages/ai-client/src/logo-generator/components/generator-modal.tsx b/projects/js-packages/ai-client/src/logo-generator/components/generator-modal.tsx
@@ -52,7 +52,8 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 } ) => {
 	const { tracks } = useAnalytics();
 	const { recordEvent: recordTracksEvent } = tracks;
-	const { setSiteDetails, fetchAiAssistantFeature, loadLogoHistory } = useDispatch( STORE_NAME );
+	const { setSiteDetails, fetchAiAssistantFeature, loadLogoHistory, setIsLoadingHistory } =
+		useDispatch( STORE_NAME );
 	const { getIsRequestingAiAssistantFeature } = select( STORE_NAME );
 	const [ loadingState, setLoadingState ] = useState<
 		'loadingFeature' | 'analyzing' | 'generating' | null
@@ -129,13 +130,15 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 				return;
 			}
 
+			setIsLoadingHistory( true );
 			// Load the logo history and clear any deleted media.
 			await clearDeletedMedia( String( siteId ) );
 			loadLogoHistory( siteId );
 
 			// If there is any logo, we do not need to generate a first logo again.
 			if ( ! isLogoHistoryEmpty( String( siteId ) ) ) {
 				setLoadingState( null );
+				setIsLoadingHistory( false );
 				return;
 			}
 
@@ -144,6 +147,7 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 		} catch ( error ) {
 			debug( 'Error fetching feature', error );
 			setLoadingState( null );
+			setIsLoadingHistory( false );
 		}
 	}, [
 		feature,
@@ -170,6 +174,7 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 		setNeedsMoreRequests( false );
 		clearErrors();
 		setLogoAccepted( false );
+		setIsLoadingHistory( false );
 		recordTracksEvent( EVENT_MODAL_CLOSE, { context, placement } );
 	};
 

diff --git a/projects/js-packages/ai-client/src/logo-generator/components/history-carousel.tsx b/projects/js-packages/ai-client/src/logo-generator/components/history-carousel.tsx
@@ -7,6 +7,7 @@ import clsx from 'clsx';
 /**
  * Internal dependencies
  */
+import loader from '../assets/images/loader.gif';
 import { EVENT_NAVIGATE } from '../constants.js';
 import useLogoGenerator from '../hooks/use-logo-generator.js';
 import './history-carousel.scss';
@@ -18,7 +19,8 @@ import type React from 'react';
 export const HistoryCarousel: React.FC = () => {
 	const { tracks } = useAnalytics();
 	const { recordEvent: recordTracksEvent } = tracks;
-	const { logos, selectedLogo, setSelectedLogoIndex, context } = useLogoGenerator();
+	const { logos, selectedLogo, setSelectedLogoIndex, context, isLoadingHistory } =
+		useLogoGenerator();
 
 	const handleClick = ( index: number ) => {
 		recordTracksEvent( EVENT_NAVIGATE, {
@@ -41,6 +43,11 @@ export const HistoryCarousel: React.FC = () => {
 
 	return (
 		<div className="jetpack-ai-logo-generator__carousel">
+			{ ! logos.length && isLoadingHistory && (
+				<Button disabled className={ clsx( 'jetpack-ai-logo-generator__carousel-logo' ) }>
+					<img height="48" width="48" src={ loader } alt={ 'loading' } />
+				</Button>
+			) }
 			{ logos.map( ( logo, index ) => (
 				<Button
 					key={ logo.url }

diff --git a/projects/js-packages/ai-client/src/logo-generator/components/logo-presenter.tsx b/projects/js-packages/ai-client/src/logo-generator/components/logo-presenter.tsx
@@ -129,6 +129,17 @@ const LogoLoading: React.FC = () => {
 	);
 };
 
+const LogoFetching: React.FC = () => {
+	return (
+		<>
+			<ImageLoader className="jetpack-ai-logo-generator-modal-presenter__logo" />
+			<span className="jetpack-ai-logo-generator-modal-presenter__loading-text">
+				{ __( 'Fetching previous logos…', 'jetpack-ai-client' ) }
+			</span>
+		</>
+	);
+};
+
 const LogoReady: React.FC< {
 	siteId: string;
 	logo: Logo;
@@ -180,13 +191,12 @@ export const LogoPresenter: React.FC< LogoPresenterProps > = ( {
 	const { isRequestingImage } = useLogoGenerator();
 	const { saveToLibraryError, logoUpdateError } = useRequestErrors();
 
-	if ( ! logo ) {
-		return null;
-	}
-
 	let logoContent: React.ReactNode;
 
-	if ( loading || isRequestingImage ) {
+	if ( ! logo ) {
+		debug( 'No logo provided, history still loading or logo being generated' );
+		logoContent = <LogoFetching />;
+	} else if ( loading || isRequestingImage ) {
 		logoContent = <LogoLoading />;
 	} else if ( logoAccepted ) {
 		logoContent = <LogoUpdated logo={ logo } />;

diff --git a/projects/js-packages/ai-client/src/logo-generator/hooks/use-logo-generator.ts b/projects/js-packages/ai-client/src/logo-generator/hooks/use-logo-generator.ts
@@ -31,6 +31,7 @@ const useLogoGenerator = () => {
 		increaseAiAssistantRequestsCount,
 		addLogoToHistory,
 		setContext,
+		setIsLoadingHistory,
 	} = useDispatch( STORE_NAME );
 
 	const {
@@ -47,6 +48,7 @@ const useLogoGenerator = () => {
 		requireUpgrade,
 		context,
 		tierPlansEnabled,
+		isLoadingHistory,
 	} = useSelect( select => {
 		const selectors: Selectors = select( STORE_NAME );
 
@@ -64,6 +66,7 @@ const useLogoGenerator = () => {
 			requireUpgrade: selectors.getRequireUpgrade(),
 			context: selectors.getContext(),
 			tierPlansEnabled: selectors.getTierPlansEnabled(),
+			isLoadingHistory: selectors.getIsLoadingHistory(),
 		};
 	}, [] );
 
@@ -386,6 +389,8 @@ User request:${ prompt }`;
 		requireUpgrade,
 		context,
 		tierPlansEnabled,
+		isLoadingHistory,
+		setIsLoadingHistory,
 	};
 };
 

diff --git a/projects/js-packages/ai-client/src/logo-generator/store/actions.ts b/projects/js-packages/ai-client/src/logo-generator/store/actions.ts
@@ -28,6 +28,7 @@ import {
 	ACTION_SET_LOGO_UPDATE_ERROR,
 	ACTION_SET_SAVE_TO_LIBRARY_ERROR,
 	ACTION_SET_CONTEXT,
+	ACTION_SET_IS_LOADING_HISTORY,
 } from './constants.js';
 import type {
 	AiFeatureProps,
@@ -247,6 +248,13 @@ const actions = {
 			context,
 		};
 	},
+
+	setIsLoadingHistory( isLoadingHistory: boolean ) {
+		return {
+			type: ACTION_SET_IS_LOADING_HISTORY,
+			isLoadingHistory,
+		};
+	},
 };
 
 export default actions;
diff --git a/projects/js-packages/ai-client/src/logo-generator/store/constants.ts b/projects/js-packages/ai-client/src/logo-generator/store/constants.ts
@@ -37,6 +37,7 @@ export const ACTION_SAVE_SELECTED_LOGO = 'SAVE_SELECTED_LOGO';
 export const ACTION_SET_IS_REQUESTING_IMAGE = 'SET_IS_REQUESTING_IMAGE';
 export const ACTION_SET_IS_ENHANCING_PROMPT = 'SET_IS_ENHANCING_PROMPT';
 export const ACTION_SET_SITE_HISTORY = 'SET_SITE_HISTORY';
+export const ACTION_SET_IS_LOADING_HISTORY = 'SET_IS_LOADING_HISTORY';
 
 /**
  * Logo generator error actions

diff --git a/projects/js-packages/ai-client/src/logo-generator/store/reducer.ts b/projects/js-packages/ai-client/src/logo-generator/store/reducer.ts
@@ -27,6 +27,7 @@ import {
 	ACTION_SET_SAVE_TO_LIBRARY_ERROR,
 	ACTION_SET_LOGO_UPDATE_ERROR,
 	ACTION_SET_CONTEXT,
+	ACTION_SET_IS_LOADING_HISTORY,
 } from './constants.js';
 import INITIAL_STATE from './initial-state.js';
 import type {
@@ -61,6 +62,7 @@ import type { SiteDetails } from '../types.js';
  * @param {Array< { url: string; description: string; mediaId?: number } >} action.history               - The logo history
  * @param {RequestError}                                                    action.error                 - The error to set
  * @param {string}                                                          action.context               - The context where the tool is being used
+ * @param {boolean}                                                         action.isLoadingHistory      - Whether the history is being loaded
  * @return {LogoGeneratorStateProp} The new state
  */
 export default function reducer(
@@ -83,6 +85,7 @@ export default function reducer(
 		history?: Array< { url: string; description: string; mediaId?: number } >;
 		error?: RequestError;
 		context?: string;
+		isLoadingHistory?: boolean;
 	}
 ) {
 	switch ( action.type ) {
@@ -381,6 +384,15 @@ export default function reducer(
 					context: action.context,
 				},
 			};
+
+		case ACTION_SET_IS_LOADING_HISTORY:
+			return {
+				...state,
+				_meta: {
+					...( state._meta ?? {} ),
+					isLoadingHistory: action.isLoadingHistory,
+				},
+			};
 	}
 
 	return state;

diff --git a/projects/js-packages/ai-client/src/logo-generator/store/selectors.ts b/projects/js-packages/ai-client/src/logo-generator/store/selectors.ts
@@ -210,6 +210,16 @@ const selectors = {
 	getTierPlansEnabled( state: LogoGeneratorStateProp ): boolean {
 		return state.features.aiAssistantFeature?.tierPlansEnabled ?? false;
 	},
+
+	/**
+	 * Get tier plans enabled status.
+	 *
+	 * @param {LogoGeneratorStateProp} state - The app state tree.
+	 * @return {boolean}                      The loading logo history status.
+	 */
+	getIsLoadingHistory( state: LogoGeneratorStateProp ): boolean {
+		return state._meta?.isLoadingHistory ?? false;
+	},
 };
 
 export default selectors;
diff --git a/projects/js-packages/ai-client/src/logo-generator/store/types.ts b/projects/js-packages/ai-client/src/logo-generator/store/types.ts
@@ -152,6 +152,7 @@ export type LogoGeneratorStateProp = {
 		saveToLibraryError?: RequestError;
 		logoUpdateError?: RequestError;
 		context: string;
+		isLoadingHistory: boolean;
 	};
 	siteDetails?: SiteDetails | Record< string, never >;
 	features: {
@@ -182,6 +183,7 @@ export type Selectors = {
 	getLogoUpdateError(): RequestError;
 	getContext(): string;
 	getTierPlansEnabled(): boolean;
+	getIsLoadingHistory(): boolean;
 };
 
 /*