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

Docs PR: https://github.com/GetStream/docs-content/pull/1161

🛠 Implementation details

• New component: CircularProgressIndicator -> displays a circular progress indicator to track progress from 0 - 100%
• New component: UploadProgressIndicator -> if upload progress is available, it displays CircularProgressIndicator, 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: UploadedSizeIndicator: displays: 5 MB / 24 MB
• New component: AttachmentUploadedSizeIndicator:
  • 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

[github-actions]

Size Change: +1.74 kB (+0.29%)

Total Size: 608 kB

📦 View Changed

Filename	Size	Change
dist/cjs/index.js	235 kB	+858 B (+0.37%)
dist/css/index.css	45 kB	+33 B (+0.07%)
dist/es/emojis.mjs	2.47 kB	-1 B (-0.04%)
dist/es/index.mjs	233 kB	+850 B (+0.37%)

ℹ️ View Unchanged

Filename	Size
dist/cjs/audioProcessing.js	1.32 kB
dist/cjs/emojis.js	2.96 kB
dist/cjs/mp3-encoder.js	1.27 kB
dist/cjs/WithAudioPlayback.js	42.4 kB
dist/css/emoji-replacement.css	456 B
dist/es/audioProcessing.mjs	1.31 kB
dist/es/mp3-encoder.mjs	756 B
dist/es/WithAudioPlayback.mjs	42.2 kB

_{compressed-size-action}

[codecov]

Codecov Report

❌ Patch coverage is 96.96970% with 2 lines in your changes missing coverage. Please review.
✅ Project coverage is 80.52%. Comparing base (dc16bb5) to head (5e3dbee).
⚠️ Report is 1 commits behind head on master.

Files with missing lines	Patch %	Lines
...r/AttachmentPreviewList/AudioAttachmentPreview.tsx	33.33%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #3060      +/-   ##
==========================================
+ Coverage   80.45%   80.52%   +0.06%     
==========================================
  Files         411      415       +4     
  Lines       11901    11948      +47     
  Branches     3835     3858      +23     
==========================================
+ Hits         9575     9621      +46     
- Misses       2326     2327       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[MartinCupela]

Can this be extracted into a React component as we have FileSizeIndicator?

[szuperaz]

I could simplify it using FileSizeIndicator: 388416d

[MartinCupela]

Could we just call it ProgressIndicator? Circular is a specific implementation of ProgressIndicator. The point of component context is as follows:

<WithComponents overrides={{ProgressIndicator: CircularProgressindicator}}>

[MartinCupela]

What is the difference btw CircularProgressIndicator and UploadProgressIndicator?

[szuperaz]

UploadProgressIndicator is a higher-level component with fallback to LoadingIndicator if progress is not provided: https://github.com/GetStream/stream-chat-react/blob/file-upload-on-progress/src/components/Loading/UploadProgressIndicator.tsx#L22

[szuperaz]

Fixed in 028f6f6