feat: track upload progress in attachment preview components#3060
feat: track upload progress in attachment preview components#3060
Conversation
szuperaz
force-pushed
the
file-upload-on-progress
branch
from
1c15431 to
6c93b9b
Compare
src/components/MessageComposer/AttachmentPreviewList/AttachmentUploadProgressIndicator.tsx
Show resolved
Hide resolved
szuperaz
force-pushed
the
file-upload-on-progress
branch
from
6c93b9b to
50c8b11
Compare
szuperaz
requested review from
MartinCupela,
arnautov-anton and
oliverlaz
as code owners
src/components/MessageComposer/AttachmentPreviewList/AudioAttachmentPreview.tsx
Outdated
Show resolved
Hide resolved
src/components/MessageComposer/AttachmentPreviewList/AudioAttachmentPreview.tsx
Outdated
Show resolved
Hide resolved
szuperaz
force-pushed
the
file-upload-on-progress
branch
2 times, most recently
from
d281040 to
9c79553
Compare
szuperaz
force-pushed
the
file-upload-on-progress
branch
from
e3e0a90 to
db938aa
Compare
| }; | ||
|
|
||
| /** Circular progress indicator with input from 0 to 100. */ | ||
| export const ProgressIndicator = ({ percent }: ProgressIndicatorProps) => { |
There was a problem hiding this comment.
| export const ProgressIndicator = ({ percent }: ProgressIndicatorProps) => { | |
| export const CircularProgressIndicator = ({ percent }: ProgressIndicatorProps) => { |
In case we added LinearProgressIndicator or any other type of progress indicator.
| const { ProgressIndicator = DefaultProgressIndicator } = useComponentContext( | ||
| 'AttachmentUploadProgressIndicator', | ||
| ); |
There was a problem hiding this comment.
| const { ProgressIndicator = DefaultProgressIndicator } = useComponentContext( | |
| 'AttachmentUploadProgressIndicator', | |
| ); | |
| const { ProgressIndicator = DefaultProgressIndicator } = useComponentContext(); |
No need to add the hook arg.
| /** Shown when `uploadProgress` is `undefined` (e.g. progress tracking disabled). */ | ||
| fallback?: ReactNode; | ||
| uploadProgress?: number; | ||
| variant: AttachmentUploadProgressVariant; |
There was a problem hiding this comment.
We may need to document what inline and overlay variants mean.
There was a problem hiding this comment.
I think, these names were just derived by AI from the specific way it used them - on overlay and somewhere in text. I see in the CSS that overlay styles icons and inline styles text. But if the designer decided to have the x MB / y MB indicator on the overlay, then we would have the inline variant on the overlay :).
I would be also thinking about what other possible progress indicators are being used generally in other apps, so that more generic names can be applied for variant.
| export type AttachmentUploadProgressIndicatorProps = { | ||
| className?: string; | ||
| /** Shown when `uploadProgress` is `undefined` (e.g. progress tracking disabled). */ | ||
| fallback?: ReactNode; |
There was a problem hiding this comment.
Could this be made ComponentType instead of ReactNode? I am thinking that it provides more flexibility to render the component in place, where it is returned, instead somewhere up in the tree.
There was a problem hiding this comment.
Actually this prop can be removed if the LoadingIndicator is consumed from the context
| <div className='str-chat__attachment-preview-file__data'> | ||
| {uploadState === 'uploading' && <LoadingIndicatorIcon />} | ||
| {uploadState === 'uploading' && ( | ||
| <AttachmentUploadProgressIndicator |
There was a problem hiding this comment.
We could introduce UploadIndicator into component context or into the props of this component.
| <> | ||
| {!resolvedDuration && !progressPercent && !isPlaying && ( | ||
| <FileSizeIndicator fileSize={attachment.file_size} /> | ||
| <AttachmentUploadedSizeIndicator attachment={attachment} /> |
There was a problem hiding this comment.
We could introduce FileSizeIndicator into ComponentContext and the default one could be handling what AttachmentUploadedSizeIndicator handles.
3 participants
🎯 Goal
https://linear.app/stream/issue/REACT-925/upload-progress-tracking
Depends on: https://github.com/GetStream/stream-chat-js/pull/1708/changes#diff-61c3f170c2f20982af303989006c8317adf3006784ed2b37513e1c50487353d0
🛠 Implementation details
ProgressIndicator-> displays a circular progress indicator to track progress from 0 - 100%AttachmentUploadProgressIndicator-> if upload progress is available, it displaysProgressIndicator, otherwise theLoadingIndicator. When is upload progress not available?AttachmentUploadedSizeIndicatorPropsto display file size:🎨 UI Changes
Implementing this design: https://www.figma.com/design/Us73erK1xFNcB5EH3hyq6Y/Chat-SDK-Design-System?node-id=3517-102932&t=fizGA6SsyGt3g08F-0