fix: use LoadingIndicator instead of LoadingIndicatorIcon

Author: szuperaz

src/components/MediaRecorder/AudioRecorder/AudioRecorderRecordingControls.tsx

@@ -1,4 +1,4 @@
-import { CheckSignIcon, LoadingIndicatorIcon } from '../../MessageComposer/icons';
+import { CheckSignIcon } from '../../MessageComposer/icons';
 import { IconDelete, IconPauseFill, IconVoice } from '../../Icons';
 import React from 'react';
 import {
@@ -9,6 +9,7 @@ import {
 import { isRecording } from './recordingStateIdentity';
 import { Button } from '../../Button';
 import { addNotificationTargetTag, useNotificationTarget } from '../../Notifications';
+import { AttachmentUploadProgressIndicator } from '../../MessageComposer/AttachmentPreviewList/AttachmentUploadProgressIndicator';
 
 const ToggleRecordingButton = () => {
   const {
@@ -40,6 +41,7 @@ export const AudioRecorderRecordingControls = () => {
   const panel = useNotificationTarget();
 
   const isUploadingFile = recording?.localMetadata?.uploadState === 'uploading';
+  const uploadProgress = recording?.localMetadata?.uploadProgress;
 
   if (!recorder) return null;
 
@@ -79,7 +81,11 @@ export const AudioRecorderRecordingControls = () => {
         size='sm'
         variant='primary'
       >
-        {isUploadingFile ? <LoadingIndicatorIcon /> : <CheckSignIcon />}
+        {isUploadingFile ? (
+          <AttachmentUploadProgressIndicator uploadProgress={uploadProgress} />
+        ) : (
+          <CheckSignIcon />
+        )}
       </Button>
     </div>
   );

src/components/MessageComposer/AttachmentPreviewList/AttachmentUploadProgressIndicator.tsx

@@ -1,27 +1,28 @@
 import clsx from 'clsx';
-import React, { type ReactNode } from 'react';
+import React from 'react';
 
-import { CircularProgressIndicator as DefaultCircularProgressIndicator } from '../../Loading';
+import {
+  CircularProgressIndicator as DefaultCircularProgressIndicator,
+  LoadingIndicator as DefaultLoadingIndicator,
+} from '../../Loading';
 import { useComponentContext } from '../../../context';
-import { LoadingIndicatorIcon } from '../icons';
 
 export type AttachmentUploadProgressIndicatorProps = {
   className?: string;
-  /** Shown when `uploadProgress` is `undefined` (e.g. progress tracking disabled). */
-  fallback?: ReactNode;
   uploadProgress?: number;
 };
 
 export const AttachmentUploadProgressIndicator = ({
   className,
-  fallback,
   uploadProgress,
 }: AttachmentUploadProgressIndicatorProps) => {
-  const { CircularProgressIndicator = DefaultCircularProgressIndicator } =
-    useComponentContext();
+  const {
+    CircularProgressIndicator = DefaultCircularProgressIndicator,
+    LoadingIndicator = DefaultLoadingIndicator,
+  } = useComponentContext();
 
   if (uploadProgress === undefined) {
-    return <>{fallback ?? <LoadingIndicatorIcon data-testid='loading-indicator' />}</>;
+    return <LoadingIndicator data-testid='loading-indicator' />;
   }
 
   return (

src/components/MessageComposer/AttachmentPreviewList/MediaAttachmentPreview.tsx

@@ -19,7 +19,6 @@ import { RemoveAttachmentPreviewButton } from '../RemoveAttachmentPreviewButton'
 import { Button } from '../../Button';
 import { AttachmentUploadProgressIndicator as DefaultAttachmentUploadProgressIndicator } from './AttachmentUploadProgressIndicator';
 import { AttachmentPreviewRoot } from './utils/AttachmentPreviewRoot';
-import { LoadingIndicator as DefaultLoadingIndicator } from '../../Loading';
 
 export type MediaAttachmentPreviewProps<CustomLocalMetadata = Record<string, unknown>> =
   UploadAttachmentPreviewProps<
@@ -38,7 +37,6 @@ export const MediaAttachmentPreview = ({
   const {
     AttachmentUploadProgressIndicator = DefaultAttachmentUploadProgressIndicator,
     BaseImage = DefaultBaseImage,
-    LoadingIndicator = DefaultLoadingIndicator,
   } = useComponentContext();
   const [thumbnailPreviewError, setThumbnailPreviewError] = useState(false);
 
@@ -100,10 +98,7 @@ export const MediaAttachmentPreview = ({
 
         <div className={clsx('str-chat__attachment-preview-media__overlay')}>
           {isUploading && (
-            <AttachmentUploadProgressIndicator
-              fallback={<LoadingIndicator data-testid='loading-indicator' />}
-              uploadProgress={uploadProgress}
-            />
+            <AttachmentUploadProgressIndicator uploadProgress={uploadProgress} />
           )}
 
           {isVideoAttachment(attachment) &&

src/components/MessageComposer/icons.tsx

@@ -1,40 +1,5 @@
-import React, { useMemo } from 'react';
-import { nanoid } from 'nanoid';
-
 import { useTranslationContext } from '../../context/TranslationContext';
 
-export const LoadingIndicatorIcon = () => {
-  const id = useMemo(() => nanoid(), []);
-
-  return (
-    <div className='str-chat__loading-indicator'>
-      <svg
-        data-testid='loading-indicator'
-        viewBox='0 0 30 30'
-        xmlns='http://www.w3.org/2000/svg'
-      >
-        <defs>
-          <linearGradient
-            id={`${id}-linear-gradient`}
-            x1='50%'
-            x2='50%'
-            y1='0%'
-            y2='100%'
-          >
-            <stop offset='0%' stopColor='#FFF' stopOpacity='0' />
-            <stop data-testid='stop-color' offset='100%' stopOpacity='1' />
-          </linearGradient>
-        </defs>
-        <path
-          d='M2.518 23.321l1.664-1.11A12.988 12.988 0 0 0 15 28c7.18 0 13-5.82 13-13S22.18 2 15 2V0c8.284 0 15 6.716 15 15 0 8.284-6.716 15-15 15-5.206 0-9.792-2.652-12.482-6.679z'
-          fill={`url(#${id}-linear-gradient)`}
-          fillRule='evenodd'
-        />
-      </svg>
-    </div>
-  );
-};
-
 export const UploadIcon = () => {
   const { t } = useTranslationContext('UploadIcon');
   return (