use progress bar to show uploads stus

packages/app/src/pages/music/creator/components/TracksUploads/index.jsx

@@ -207,6 +207,19 @@ const FileListItem = (props) => {
                     />
                 }
 
+                <div className={classnames(
+                    "fileListItem_progress",
+                    {
+                        ["hidden"]: !isUploading,
+                    }
+                )}>
+                    <antd.Progress
+                        percent={props.track.progress ?? 0}
+                        status={props.track.status === "error" ? "exception" : (props.track.progress === 100 ? "success" : "active")}
+                        showInfo={false}
+                    />
+                </div>
+
                 <div className="fileListItem_cover">
                     <img
                         src={props.track.cover ?? props.track?.thumbnail}

packages/app/src/pages/music/creator/components/TracksUploads/index.less

@@ -136,6 +136,33 @@
                     }
                 }
 
+                .fileListItem_progress {
+                    position: absolute;
+
+                    bottom: 0;
+                    left: 0;
+
+                    display: flex;
+                    flex-direction: column;
+
+                    align-items: center;
+                    justify-content: center;
+
+                    width: 100%;
+
+                    .ant-progress-line {
+                        margin: 0 !important;
+                        padding: 0 !important;
+
+                        width: 40%;
+                    }
+
+                    &.hidden {
+                        animation: hide 0.2s ease-in-out forwards;
+                        animation-delay: 2s;
+                    }
+                }
+
                 .fileListItem_loadingIcon {
                     position: absolute;
                     top: 0;
@@ -155,6 +182,8 @@
                 }
 
                 .fileListItem_cover {
+                    position: relative;
+
                     display: flex;
                     flex-direction: column;
 
@@ -337,8 +366,22 @@
                 border-radius: 12px;
 
                 background-color: black;
-
             }
         }
     }
+}
+
+@keyframes hide {
+    0% {
+        opacity: 1;
+    }
+
+    99% {
+        opacity: 0;
+        width: fit-content;
+    }
+
+    100% {
+        width: 0px;
+    }
 }

packages/app/src/pages/music/creator/index.jsx

@@ -161,9 +161,23 @@ export default class PlaylistCreatorSteps extends React.Component {
         })
     }
 
+    handleFileProgress = (file, progress) => {
+        const trackList = this.state.trackList
+
+        const track = trackList.find((track) => track.uid === file.uid)
+
+        if (track) {
+            track.progress = progress
+
+            this.setState({
+                trackList
+            })
+        }
+    }
+
     handleUploadTrack = async (req) => {
         const response = await app.cores.remoteStorage.uploadFile(req.file, {
-            timeout: 2000
+            onProgress: this.handleFileProgress
         }).catch((error) => {
             console.error(error)
             antd.message.error(error)