Reactjs 我希望为这个提交功能添加一个进度侦听器或反馈，以让用户知道任务何时完成

我希望使用或任何材料UI反馈组件来捕获表单的提交进度

const onSubmit = (e) => {
    e.preventDefault();
    if (eventImage) {
        const uploadImage = storage.ref(`EventImages/${values.eventName}`)
        uploadImage.put(eventImage).then(() => {
            storage.ref('EventImages').child(values.eventName).getDownloadURL().then(url => {
                dbref.add({
                    eventName: values.eventName,
                    eventVenue: values.eventVenue,
                    eventAddress: values.eventAddress,
                    eventCategory: values.eventCategory,
                    eventOrganizer: values.eventOrganizer,
                    eventPhone: values.eventPhone,
                    eventEmail: values.eventEmail,
                    eventDetails: values.eventDetails,
                    eventDate: selectedDate.toDateString(),
                    eventTime: selectedDate.toLocaleTimeString(),
                    eventImgUrl: url
                }).then((docRef) => {
                    console.log("Document written with ID: ", docRef.id);
                    setValues("");
                    setImg("");
                    setImgName("");
                }).catch((error) => {
                    console.error("Error adding document: ", error);
                });
            })
        })

    }
    }

---

我希望使用任何材料UI反馈组件来实现这一点

通常在这种情况下使用进度条，以便用户知道任务完成/剩余多少

IMO显示完成百分比和/或剩余时间有助于提高效率。（实施时间有点困难）

物料界面进度条：

这可能有用吗

---

他们还有一个附带源代码的示例。如果您需要更多信息，请告诉我

我应该将进度附加到哪里？