add suspenseful typing effect for async processes

Automattic · Jan 2, 2025 · 4f4ac63 · 4f4ac63
1 parent ddfb287
commit 4f4ac63
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 22 deletions.
diff --git a/...plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/index.tsx b/...plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/index.tsx
@@ -1,4 +1,4 @@
-import { Button, TextControl } from '@wordpress/components';
+import { Button, TextControl, SVG, Circle } from '@wordpress/components';
 import {
 	useState,
 	useCallback,
@@ -60,6 +60,16 @@ interface SeoAssistantProps {
 
 const debug = debugFactory( 'jetpack-ai:seo-assistant' );
 
+const TypingMessage = () => {
+	return (
+		<SVG viewBox="0 0 40 40" height="20" width="20" className="typing-loader">
+			<Circle className="typing-dot" cx="10" cy="30" r="3" style={ { fill: 'grey' } } />
+			<Circle className="typing-dot" cx="20" cy="30" r="3" style={ { fill: 'grey' } } />
+			<Circle className="typing-dot" cx="30" cy="30" r="3" style={ { fill: 'grey' } } />
+		</SVG>
+	);
+};
+
 export default function SeoAssistant( { busy, disabled, onStep }: SeoAssistantProps ) {
 	const [ isOpen, setIsOpen ] = useState( false );
 	const [ currentStep, setCurrentStep ] = useState( 0 );
@@ -106,6 +116,11 @@ export default function SeoAssistant( { busy, disabled, onStep }: SeoAssistantPr
 		] );
 	};
 
+	/* Removes last message */
+	const removeLastMessage = () => {
+		setMessages( prev => prev.slice( 0, -1 ) );
+	};
+
 	const handleKeywordsSubmit = useCallback(
 		( value: string ) => {
 			setKeywords( value );

diff --git a/...lugins/jetpack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/style.scss b/...lugins/jetpack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/style.scss
@@ -206,24 +206,19 @@
 }
 
 // Keep this around for magic:
-// @keyframes blink {
-// 	30% { cy: 30; }
-// 	50% { cy: 25; fill: lightgrey }
-// 	70% { cy: 30; }
-// }
-// .dot {
-// 	animation: 1s blink linear infinite;
-// 	fill: grey;
-// }
-// .dot:nth-child(2) { animation-delay: 150ms }
-// .dot:nth-child(3) { animation-delay: 250ms }
-
-// .loader {
-// 	background-color: #f1f1f1;
-// 	color: grey;
-// }
-// <svg height="40" width="40" class="loader">
-//   <circle class="dot" cx="10" cy="30" r="3" style="fill:grey;" />
-//   <circle class="dot" cx="20" cy="30" r="3" style="fill:grey;" />
-//   <circle class="dot" cx="30" cy="30" r="3" style="fill:grey;" />
-// </svg>
+@keyframes typing-blink {
+	30% { cy: 30; }
+	50% { cy: 25; fill: lightgrey }
+	70% { cy: 30; }
+}
+.typing-dot {
+	animation: 1s typing-blink linear infinite;
+	fill: grey;
+}
+.typing-dot:nth-child(2) { animation-delay: 150ms }
+.typing-dot:nth-child(3) { animation-delay: 250ms }
+
+.typing-loader {
+	// background-color: #f1f1f1;
+	color: grey;
+}