AI Assistant: Fix flickering when adding word to Breve dictionary (#3…

…9087) * reload the highlights without using the loading flag * changelog
Automattic · Aug 27, 2024 · 1673ba1 · 1673ba1
1 parent 9a9838f
commit 1673ba1
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 9 deletions.
diff --git a/...ts/plugins/jetpack/changelog/update-jetpack-ai-breve-add-to-dictionary-without-flickering b/...ts/plugins/jetpack/changelog/update-jetpack-ai-breve-add-to-dictionary-without-flickering
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+AI Assistant: Fix flickering when adding word to Breve dictionary
diff --git a/...tensions/plugins/ai-assistant-plugin/components/breve/features/spelling-mistakes/index.ts b/...tensions/plugins/ai-assistant-plugin/components/breve/features/spelling-mistakes/index.ts
@@ -143,7 +143,7 @@ export const addTextToDictionary = (
 	// Recompute the spell checker on the next call
 	delete spellCheckers[ language ];
 
-	reloadDictionary( SPELLING_MISTAKES.name );
+	reloadDictionary();
 
 	debug( 'Added text to the dictionary', text );
 };

diff --git a/.../plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/store/actions.ts b/.../plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/store/actions.ts
@@ -90,13 +90,9 @@ export function invalidateSingleSuggestion( feature: string, blockId: string, id
 	};
 }
 
-export function reloadDictionary( feature: string ) {
-	return ( { dispatch } ) => {
-		dispatch( setDictionaryLoading( feature, true ) );
-
-		setTimeout( () => {
-			dispatch( setDictionaryLoading( feature, false ) );
-		}, 100 );
+export function reloadDictionary() {
+	return {
+		type: 'RELOAD_DICTIONARY',
 	};
 }
 

diff --git a/.../plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/store/reducer.ts b/.../plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/store/reducer.ts
@@ -76,6 +76,13 @@ export function configuration(
 				loading,
 			};
 		}
+
+		case 'RELOAD_DICTIONARY': {
+			return {
+				...state,
+				reload: ! state.reload,
+			};
+		}
 	}
 
 	return state;

diff --git a/...lugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/store/selectors.ts b/...lugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/store/selectors.ts
@@ -39,6 +39,10 @@ export function getDisabledFeatures( state: BreveState ) {
 	return state.configuration?.disabled;
 }
 
+export function getReloadFlag( state: BreveState ) {
+	return state.configuration?.reload;
+}
+
 // Suggestions
 
 export function getBlockMd5( state: BreveState, blockId: string ) {

diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/types.ts b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/types.ts
@@ -19,6 +19,7 @@ export type BreveState = {
 		enabled?: boolean;
 		disabled?: Array< string >;
 		loading?: Array< string >;
+		reload?: boolean;
 	};
 	suggestions?: {
 		[ key: string ]: {
@@ -67,6 +68,7 @@ export type BreveSelect = {
 		suggestion: string;
 	};
 	getIgnoredSuggestions: ( { blockId }: { blockId: string } ) => Array< string >;
+	getReloadFlag: () => boolean;
 };
 
 export type BreveDispatch = {
@@ -78,7 +80,7 @@ export type BreveDispatch = {
 	setDictionaryLoading( feature: string, loading: boolean ): void;
 	invalidateSuggestions: ( blockId: string ) => void;
 	invalidateSingleSuggestion: ( feature: string, blockId: string, id: string ) => void;
-	reloadDictionary: ( feature: string ) => void;
+	reloadDictionary: () => void;
 	ignoreSuggestion: ( blockId: string, id: string ) => void;
 	setBlockMd5: ( blockId: string, md5: string ) => void;
 	setSuggestions: ( suggestions: {

diff --git a/.../jetpack/extensions/plugins/ai-assistant-plugin/components/breve/utils/register-format.ts b/.../jetpack/extensions/plugins/ai-assistant-plugin/components/breve/utils/register-format.ts
@@ -50,6 +50,7 @@ export function registerBreveHighlight( feature: BreveFeature ) {
 				isFeatureEnabled,
 				isProofreadEnabled,
 				isFeatureDictionaryLoading,
+				getReloadFlag,
 			} = select( 'jetpack/ai-breve' ) as BreveSelect;
 
 			const { getAiAssistantFeature } = select( 'wordpress-com/plans' );
@@ -60,6 +61,7 @@ export function registerBreveHighlight( feature: BreveFeature ) {
 				isFeatureEnabled: isFeatureEnabled( config.name ),
 				ignored: getIgnoredSuggestions( { blockId: blockClientId } ),
 				isFeatureDictionaryLoading: isFeatureDictionaryLoading( config.name ),
+				reloadFlag: getReloadFlag(), // Used to force a reload of the highlights
 			};
 		},