add loading progres spiner first stage

frontend/src/components/chatPage/ChatPage.jsx

@@ -33,11 +33,27 @@ export const ChatPage = () => {
     const [message, setMessage] = useState({message: ''});
     const [isUserTyping, setUserTyping] = useState([]);
     const [isCamActiv, setisCamActiv] = useState(false);
+    const [showSpinner, setshowSpinner] = useState(false);
+    const [loadingPercentage, setLoadPercentage] = useState(0)
     
     const isTabletorMobile = (window.screen.width < 730);
 
     const [play] = useSound(getNotif, {volume: 0.2});
 
+
+    const axiosConfig =   {
+        headers: {
+            "Content-type": "multipart/form-data"
+          },
+        onUploadProgress: (progress) => {
+        const {loaded, total} = progress;
+        const loadStatus = Math.floor(loaded * 100 / total); 
+        setLoadPercentage(loadStatus)   
+        if(loadStatus == 100) {
+            setshowSpinner(false)
+        }
+    }}
+
     const webcamEventHandler = async () => {
             let stream = null;
             try {
@@ -162,7 +178,8 @@ export const ChatPage = () => {
                         >
                         <input
                             onChange={e =>{
-                                dispatch(fileMessage(e.target.files))
+                                setshowSpinner(true)
+                                dispatch(fileMessage({files: e.target.files, axiosConfig}))
                             }}
 
                             type="file"

frontend/src/reducers/messageReducer.js

@@ -8,7 +8,8 @@ const initialState = {
     editMessage: '',
     messageId: '', 
     files: [],
-    percentage: 0,
+    isLoading: false,
+    loadingPercentage: 0,
     ref: null
 }
 
@@ -35,7 +36,8 @@ export const editMessageHandler = (state, data) => {
 
 export const fileMessage = createAsyncThunk(
     'messageReducer/fileMessageStatus',
-    async (files) => {
+    async (payload) => {
+        const {files, axiosConfig} = payload;
         const token = localStorage.getItem('token')
         try {
             const formData = new FormData();
@@ -47,16 +49,7 @@ export const fileMessage = createAsyncThunk(
                 formData.append('files', files)
             }
             formData.append('token', token)
-            const response = await axios.post(POST_FILES_URL, formData,{
-                onUploadProgress: (progress) => {
-                    const {loaded, total} = progress;
-                    const loadStatus = Math.floor(loaded * 100 / total);
-                },
-                    headers: {
-                      "Content-type": "multipart/form-data",
-                    }
-                  })
-                  ;
+            const response = await axios.post(POST_FILES_URL, formData,axiosConfig);
             return await response;
             
         } catch (err) {
@@ -94,8 +87,7 @@ const messageReducerSlice = createSlice({
             
     })  
     .addCase(fileMessage.pending, (state, action) => {
-        state.persentage = action.percentage;
-        console.log('pending', action)
+        console.log('pending', fileMessage.pending())
     })
     .addCase(fileMessage.rejected, (state, action) => {
             console.log('post file rejected', action.payload)

frontend/src/serviceWorkerRegistration.js

@@ -19,9 +19,9 @@ const isLocalhost = Boolean(
   );
 
   export function register(config) {
-    console.log('registering..', navigator)
+   // console.log('registering..', navigator)
     if ('serviceWorker' in navigator) {
-      console.log('registering..', navigator)
+      //console.log('registering..', navigator)
 
       // The URL constructor is available in all browsers that support SW.
       const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);