feat: track upload progress in attachment preview components

[szuperaz]

🎯 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

• New component: ProgressIndicator -> displays a circular progress indicator to track progress from 0 - 100%
• New component: AttachmentUploadProgressIndicator -> if upload progress is available, it displays ProgressIndicator, otherwise the LoadingIndicator. When is upload progress not available?
  • It's possible that axios can't retrieve upload progress info
  • If someone uses custom CDN uploads, they may not be able to/want to provide progress tracking
• New component: AttachmentUploadedSizeIndicatorProps to display file size:
  • During upload: 4 MB / 24 MB
  • After upload finished: 24 MB

🎨 UI Changes

Implementing this design: https://www.figma.com/design/Us73erK1xFNcB5EH3hyq6Y/Chat-SDK-Design-System?node-id=3517-102932&t=fizGA6SsyGt3g08F-0

[MartinCupela]

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.

[MartinCupela]

Actually this prop can be removed if the LoadingIndicator is consumed from the context

[szuperaz]

I wanted to do that, but I think there are two loading indicators:

• LoadingIndicatorIcon in MessageComposer: https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageComposer/icons.tsx#L6 - without any override in ComponentContext, but this is what is used currently for loading here
• LoadingIndicator - https://github.com/GetStream/stream-chat-react/blob/master/src/components/Loading/LoadingIndicator.tsx#L6 - this one has override in ComponentContext. I'm not sure why we have two, should I use this here instead of the LoadingIndicatorIcon?

[MartinCupela]

Yes please, I think that is the remnant of not having the loading indicator finished according to the new designs.

[MartinCupela]

We could introduce UploadIndicator into component context or into the props of this component.

[szuperaz]

Added AttachmentUploadProgressIndicator to ComponentContext in 0a8d65d

[MartinCupela]

Could use property UploadIndicator instead of AttachmentUploadProgressIndicator as it is more generic?

[szuperaz]

Yes, for AttachmentUploadProgressIndicator we could do UploadIndicator I guess. For the other one: AttachmentUploadedSizeIndicator - we can't because that has a bit more complex logic depending on attachment-specific fields.