adding spinner animation to the loading state modal (#10862)

Author: FBanfi

apps/google-docs/src/locations/Page/components/modals/LoadingModal.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { Modal, Paragraph, Skeleton, Flex } from '@contentful/f36-components';
+import { Modal, Paragraph, Skeleton, Flex, Spinner, Box } from '@contentful/f36-components';
 import { useSequentialMessages } from '@hooks/useSequentialMessages';
 import tokens, { ColorTokens } from '@contentful/f36-tokens';
 import { css, keyframes } from '@emotion/css';
@@ -71,15 +71,15 @@ export const LoadingModal: React.FC<LoadingModalProps> = ({
   const messages = useMemo(() => {
     if (step === 'reviewingContentTypes') {
       const baseMessages = [
-        'Fetching document...',
-        'Analyzing document structure...',
-        'Processing document with AI...',
+        'Fetching document',
+        'Analyzing document structure',
+        'Processing document with AI',
         contentTypeCount
           ? `Analyzing content for ${contentTypeCount} content type${
               contentTypeCount === 1 ? '' : 's'
-            }...`
-          : 'Analyzing content for content types...',
-        'Generating preview entries...',
+            }`
+          : 'Analyzing content for content types',
+        'Generating preview entries',
       ];
       return baseMessages;
     }
@@ -106,13 +106,19 @@ export const LoadingModal: React.FC<LoadingModalProps> = ({
               <div className={styles.verticalBar} />
               <Flex flex={1} flexDirection="column" gap="spacingS" alignItems="flex-start">
                 {visibleMessages.map((message, index) => (
-                  <Paragraph
-                    key={message}
-                    fontColor={getMessageColor(index, visibleMessages.length)}
-                    marginBottom="none"
-                    className={styles.message}>
-                    {message}
-                  </Paragraph>
+                  <Flex key={message} alignItems="center" className={styles.message}>
+                    <Paragraph
+                      fontColor={getMessageColor(index, visibleMessages.length)}
+                      marginBottom="none">
+                      {message}
+                    </Paragraph>
+
+                    {index === visibleMessages.length - 1 ? (
+                      <Box as="span" marginLeft="spacing2Xs">
+                        <Spinner customSize={18} variant="default" />
+                      </Box>
+                    ) : null}
+                  </Flex>
                 ))}
               </Flex>
             </Flex>

apps/google-docs/test/locations/Page/components/modals/LoadingModal.spec.tsx

@@ -0,0 +1,51 @@
+import { act, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import React from 'react';
+import { Modal } from '@contentful/f36-components';
+import { LoadingModal } from '../../../../../src/locations/Page/components/modals/LoadingModal';
+
+describe('LoadingModal', () => {
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  const renderLoadingModal = () =>
+    render(
+      <Modal isShown onClose={vi.fn()}>
+        <LoadingModal
+          step="reviewingContentTypes"
+          title="Preparing your preview"
+          contentTypeCount={2}
+          onClose={vi.fn()}
+        />
+      </Modal>
+    );
+
+  it('shows the first active step without ellipsis', () => {
+    renderLoadingModal();
+
+    const firstRow = screen.getByText('Fetching document').closest('div');
+
+    expect(screen.getByText('Fetching document')).toBeTruthy();
+    expect(screen.queryByText('Fetching document...')).toBeNull();
+    expect(firstRow?.querySelector('[data-test-id="cf-ui-spinner"]')).toBeTruthy();
+  });
+
+  it('moves the active indicator to the newest visible step over time', () => {
+    vi.useFakeTimers();
+
+    renderLoadingModal();
+
+    act(() => {
+      vi.advanceTimersByTime(20000);
+    });
+
+    const firstRow = screen.getByText('Fetching document').closest('div');
+    const secondRow = screen.getByText('Analyzing document structure').closest('div');
+
+    expect(screen.getByText('Fetching document')).toBeTruthy();
+    expect(screen.getByText('Analyzing document structure')).toBeTruthy();
+    expect(firstRow?.querySelector('[data-test-id="cf-ui-spinner"]')).toBeNull();
+    expect(secondRow?.querySelector('[data-test-id="cf-ui-spinner"]')).toBeTruthy();
+  });
+});