refactor: rename AttachmentUploadProgressIndicator to UploadProgressIndicator

szuperaz · szuperaz · commit e686dcacd132 · 2026-04-08T09:40:42.000+02:00
diff --git a/src/components/Loading/UploadProgressIndicator.tsx b/src/components/Loading/UploadProgressIndicator.tsx
@@ -1,21 +1,19 @@
 import clsx from 'clsx';
 import React from 'react';
 
-import {
-  CircularProgressIndicator as DefaultCircularProgressIndicator,
-  LoadingIndicator as DefaultLoadingIndicator,
-} from '../../Loading';
-import { useComponentContext } from '../../../context';
+import { useComponentContext } from '../../context';
+import { CircularProgressIndicator as DefaultCircularProgressIndicator } from './CircularProgressIndicator';
+import { LoadingIndicator as DefaultLoadingIndicator } from './LoadingIndicator';
 
-export type AttachmentUploadProgressIndicatorProps = {
+export type UploadProgressIndicatorProps = {
   className?: string;
   uploadProgress?: number;
 };
 
-export const AttachmentUploadProgressIndicator = ({
+export const UploadProgressIndicator = ({
   className,
   uploadProgress,
-}: AttachmentUploadProgressIndicatorProps) => {
+}: UploadProgressIndicatorProps) => {
   const {
     CircularProgressIndicator = DefaultCircularProgressIndicator,
     LoadingIndicator = DefaultLoadingIndicator,
diff --git a/src/components/Loading/index.ts b/src/components/Loading/index.ts
@@ -3,3 +3,4 @@ export * from './LoadingChannels';
 export * from './LoadingErrorIndicator';
 export * from './LoadingIndicator';
 export * from './CircularProgressIndicator';
+export * from './UploadProgressIndicator';
diff --git a/src/components/MediaRecorder/AudioRecorder/AudioRecorderRecordingControls.tsx b/src/components/MediaRecorder/AudioRecorder/AudioRecorderRecordingControls.tsx
@@ -3,13 +3,14 @@ import { IconDelete, IconPauseFill, IconVoice } from '../../Icons';
 import React from 'react';
 import {
   useChatContext,
+  useComponentContext,
   useMessageComposerContext,
   useTranslationContext,
 } from '../../../context';
 import { isRecording } from './recordingStateIdentity';
 import { Button } from '../../Button';
 import { addNotificationTargetTag, useNotificationTarget } from '../../Notifications';
-import { AttachmentUploadProgressIndicator } from '../../MessageComposer/AttachmentPreviewList/AttachmentUploadProgressIndicator';
+import { UploadProgressIndicator as DefaultUploadProgressIndicator } from '../../Loading/UploadProgressIndicator';
 
 const ToggleRecordingButton = () => {
   const {
@@ -35,6 +36,8 @@ const ToggleRecordingButton = () => {
 export const AudioRecorderRecordingControls = () => {
   const { client } = useChatContext();
   const { t } = useTranslationContext();
+  const { UploadProgressIndicator = DefaultUploadProgressIndicator } =
+    useComponentContext();
   const {
     recordingController: { completeRecording, recorder, recording, recordingState },
   } = useMessageComposerContext();
@@ -82,7 +85,7 @@ export const AudioRecorderRecordingControls = () => {
         variant='primary'
       >
         {isUploadingFile ? (
-          <AttachmentUploadProgressIndicator uploadProgress={uploadProgress} />
+          <UploadProgressIndicator uploadProgress={uploadProgress} />
         ) : (
           <CheckSignIcon />
         )}
diff --git a/src/components/MessageComposer/AttachmentPreviewList/AudioAttachmentPreview.tsx b/src/components/MessageComposer/AttachmentPreviewList/AudioAttachmentPreview.tsx
@@ -7,7 +7,7 @@ import {
 import { useComponentContext, useTranslationContext } from '../../../context';
 import React, { useEffect } from 'react';
 import clsx from 'clsx';
-import { AttachmentUploadProgressIndicator as DefaultAttachmentUploadProgressIndicator } from './AttachmentUploadProgressIndicator';
+import { UploadProgressIndicator as DefaultUploadProgressIndicator } from '../../Loading/UploadProgressIndicator';
 import { RemoveAttachmentPreviewButton } from '../RemoveAttachmentPreviewButton';
 import { AttachmentPreviewRoot } from './utils/AttachmentPreviewRoot';
 import { IconExclamationMark, IconExclamationTriangleFill } from '../../Icons';
@@ -44,7 +44,7 @@ export const AudioAttachmentPreview = ({
   const { t } = useTranslationContext();
   const {
     AttachmentUploadedSizeIndicator = DefaultAttachmentUploadedSizeIndicator,
-    AttachmentUploadProgressIndicator = DefaultAttachmentUploadProgressIndicator,
+    UploadProgressIndicator = DefaultUploadProgressIndicator,
   } = useComponentContext();
   const { id, previewUri, uploadPermissionCheck, uploadProgress, uploadState } =
     attachment.localMetadata ?? {};
@@ -98,7 +98,7 @@ export const AudioAttachmentPreview = ({
         </div>
         <div className='str-chat__attachment-preview-file__data'>
           {uploadState === 'uploading' && (
-            <AttachmentUploadProgressIndicator uploadProgress={uploadProgress} />
+            <UploadProgressIndicator uploadProgress={uploadProgress} />
           )}
           {showProgressControls ? (
             <>
diff --git a/src/components/MessageComposer/AttachmentPreviewList/FileAttachmentPreview.tsx b/src/components/MessageComposer/AttachmentPreviewList/FileAttachmentPreview.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useComponentContext, useTranslationContext } from '../../../context';
 import { FileIcon } from '../../FileIcon';
-import { AttachmentUploadProgressIndicator as DefaultAttachmentUploadProgressIndicator } from './AttachmentUploadProgressIndicator';
+import { UploadProgressIndicator as DefaultUploadProgressIndicator } from '../../Loading/UploadProgressIndicator';
 import { AttachmentUploadedSizeIndicator as DefaultAttachmentUploadedSizeIndicator } from './AttachmentUploadedSizeIndicator';
 import type { LocalAudioAttachment, LocalFileAttachment } from 'stream-chat';
 import type { UploadAttachmentPreviewProps } from './types';
@@ -22,7 +22,7 @@ export const FileAttachmentPreview = ({
   const { t } = useTranslationContext('FilePreview');
   const {
     AttachmentUploadedSizeIndicator = DefaultAttachmentUploadedSizeIndicator,
-    AttachmentUploadProgressIndicator = DefaultAttachmentUploadProgressIndicator,
+    UploadProgressIndicator = DefaultUploadProgressIndicator,
   } = useComponentContext();
   const { id, uploadPermissionCheck, uploadProgress, uploadState } =
     attachment.localMetadata ?? {};
@@ -47,7 +47,7 @@ export const FileAttachmentPreview = ({
         </div>
         <div className='str-chat__attachment-preview-file__data'>
           {uploadState === 'uploading' && (
-            <AttachmentUploadProgressIndicator uploadProgress={uploadProgress} />
+            <UploadProgressIndicator uploadProgress={uploadProgress} />
           )}
           <AttachmentUploadedSizeIndicator attachment={attachment} />
           {hasFatalError && (
diff --git a/src/components/MessageComposer/AttachmentPreviewList/MediaAttachmentPreview.tsx b/src/components/MessageComposer/AttachmentPreviewList/MediaAttachmentPreview.tsx
@@ -17,7 +17,7 @@ import clsx from 'clsx';
 import { IconExclamationMark, IconRetry, IconVideoFill } from '../../Icons';
 import { RemoveAttachmentPreviewButton } from '../RemoveAttachmentPreviewButton';
 import { Button } from '../../Button';
-import { AttachmentUploadProgressIndicator as DefaultAttachmentUploadProgressIndicator } from './AttachmentUploadProgressIndicator';
+import { UploadProgressIndicator as DefaultUploadProgressIndicator } from '../../Loading/UploadProgressIndicator';
 import { AttachmentPreviewRoot } from './utils/AttachmentPreviewRoot';
 
 export type MediaAttachmentPreviewProps<CustomLocalMetadata = Record<string, unknown>> =
@@ -35,8 +35,8 @@ export const MediaAttachmentPreview = ({
 }: MediaAttachmentPreviewProps) => {
   const { t } = useTranslationContext();
   const {
-    AttachmentUploadProgressIndicator = DefaultAttachmentUploadProgressIndicator,
     BaseImage = DefaultBaseImage,
+    UploadProgressIndicator = DefaultUploadProgressIndicator,
   } = useComponentContext();
   const [thumbnailPreviewError, setThumbnailPreviewError] = useState(false);
 
@@ -97,9 +97,7 @@ export const MediaAttachmentPreview = ({
         )}
 
         <div className={clsx('str-chat__attachment-preview-media__overlay')}>
-          {isUploading && (
-            <AttachmentUploadProgressIndicator uploadProgress={uploadProgress} />
-          )}
+          {isUploading && <UploadProgressIndicator uploadProgress={uploadProgress} />}
 
           {isVideoAttachment(attachment) &&
             !hasUploadError &&
diff --git a/src/context/ComponentContext.tsx b/src/context/ComponentContext.tsx
@@ -75,7 +75,7 @@ import type { EditedMessagePreviewProps } from '../components/MessageComposer/Ed
 import type { FileIconProps } from '../components/FileIcon/FileIcon';
 import type { CommandChipProps } from '../components/MessageComposer/CommandChip';
 import type { CircularProgressIndicatorProps } from '../components/Loading/CircularProgressIndicator';
-import type { AttachmentUploadProgressIndicatorProps } from '../components/MessageComposer/AttachmentPreviewList/AttachmentUploadProgressIndicator';
+import type { UploadProgressIndicatorProps } from '../components/Loading/UploadProgressIndicator';
 import type { AttachmentUploadedSizeIndicatorProps } from '../components/MessageComposer/AttachmentPreviewList/AttachmentUploadedSizeIndicator';
 
 export type ComponentContextValue = {
@@ -89,8 +89,6 @@ export type ComponentContextValue = {
   AttachmentPreviewList?: React.ComponentType<AttachmentPreviewListProps>;
   /** Custom UI component to control adding attachments to MessageComposer, defaults to and accepts same props as: [AttachmentSelector](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageComposer/AttachmentSelector.tsx) */
   AttachmentSelector?: React.ComponentType;
-  /** Custom UI component for upload progress on attachment previews in MessageComposer, defaults to and accepts same props as: [AttachmentUploadProgressIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageComposer/AttachmentPreviewList/AttachmentUploadProgressIndicator.tsx) */
-  AttachmentUploadProgressIndicator?: React.ComponentType<AttachmentUploadProgressIndicatorProps>;
   /** Custom UI component for uploaded/total size on attachment previews in MessageComposer, defaults to and accepts same props as: [AttachmentUploadedSizeIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageComposer/AttachmentPreviewList/AttachmentUploadedSizeIndicator.tsx) */
   AttachmentUploadedSizeIndicator?: React.ComponentType<AttachmentUploadedSizeIndicatorProps>;
   /** Custom UI component for the dedicated voice recording preview slot above composer attachments (REACT-794), defaults to and accepts same props as: [VoiceRecordingPreviewSlot](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageComposer/AttachmentPreviewList/VoiceRecordingPreviewSlot.tsx) */
@@ -272,6 +270,8 @@ export type ComponentContextValue = {
   UnreadMessagesNotification?: React.ComponentType<UnreadMessagesNotificationProps>;
   /** Custom UI component that separates read messages from unread, defaults to and accepts same props as: [UnreadMessagesSeparator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/UnreadMessagesSeparator.tsx) */
   UnreadMessagesSeparator?: React.ComponentType<UnreadMessagesSeparatorProps>;
+  /** Custom UI component for upload progress (e.g. attachment previews, audio recording), defaults to and accepts same props as: [UploadProgressIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Loading/UploadProgressIndicator.tsx) */
+  UploadProgressIndicator?: React.ComponentType<UploadProgressIndicatorProps>;
   /** Component used to play video. If not provided, ReactPlayer is used as a default video player. */
   VideoPlayer?: React.ComponentType<VideoPlayerProps>;
   /** Custom UI component to display a message in the `VirtualizedMessageList`, does not have a default implementation */
