[FIX] Loading message in document picker bug (#1202)

* fix loading message in document picker bug

* linting

---------

Co-authored-by: timothycarambat <rambat1010@gmail.com>

frontend/src/components/Modals/MangeWorkspace/Documents/Directory/index.jsx

@@ -306,6 +306,7 @@ function Directory({
           workspace={workspace}
           fetchKeys={fetchKeys}
           setLoading={setLoading}
+          setLoadingMessage={setLoadingMessage}
         />
       </div>
     </div>

frontend/src/components/Modals/MangeWorkspace/Documents/UploadFile/FileUploadProgress/index.jsx

@@ -12,6 +12,8 @@ function FileUploadProgressComponent({
   reason = null,
   onUploadSuccess,
   onUploadError,
+  setLoading,
+  setLoadingMessage,
 }) {
   const [timerMs, setTimerMs] = useState(10);
   const [status, setStatus] = useState("pending");
@@ -19,6 +21,8 @@ function FileUploadProgressComponent({
 
   useEffect(() => {
     async function uploadFile() {
+      setLoading(true);
+      setLoadingMessage("Uploading file...");
       const start = Number(new Date());
       const formData = new FormData();
       formData.append("file", file, file.name);
@@ -34,6 +38,8 @@ function FileUploadProgressComponent({
         onUploadError(data.error);
         setError(data.error);
       } else {
+        setLoading(false);
+        setLoadingMessage("");
         setStatus("complete");
         clearInterval(timer);
         onUploadSuccess();

frontend/src/components/Modals/MangeWorkspace/Documents/UploadFile/index.jsx

@@ -7,7 +7,12 @@ import { v4 } from "uuid";
 import FileUploadProgress from "./FileUploadProgress";
 import Workspace from "../../../../../models/workspace";
 
-export default function UploadFile({ workspace, fetchKeys, setLoading }) {
+export default function UploadFile({
+  workspace,
+  fetchKeys,
+  setLoading,
+  setLoadingMessage,
+}) {
   const [ready, setReady] = useState(false);
   const [files, setFiles] = useState([]);
   const [fetchingUrl, setFetchingUrl] = useState(false);
@@ -15,6 +20,7 @@ export default function UploadFile({ workspace, fetchKeys, setLoading }) {
   const handleSendLink = async (e) => {
     e.preventDefault();
     setLoading(true);
+    setLoadingMessage("Scraping link...");
     setFetchingUrl(true);
     const formEl = e.target;
     const form = new FormData(formEl);
@@ -114,6 +120,8 @@ export default function UploadFile({ workspace, fetchKeys, setLoading }) {
                 reason={file?.reason}
                 onUploadSuccess={handleUploadSuccess}
                 onUploadError={handleUploadError}
+                setLoading={setLoading}
+                setLoadingMessage={setLoadingMessage}
               />
             ))}
           </div>