added toast

src/Components/common/skelton/loading.tsx

@@ -11,18 +11,21 @@
 // export default LoadingIndicator;
 
 import React from 'react';
+import { FaSpinner } from 'react-icons/fa';
 
 const LoadingIndicator: React.FC = () => {
   return (
-    <div className="fixed inset-0 flex items-center justify-center bg-gray-800 bg-opacity-75 z-50">
-      <dotlottie-player
+    <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
+      {/* <dotlottie-player
         src="https://lottie.host/5a15fcda-33b9-4804-adb7-d0d45ddb5adf/6ViL1HZNqp.json"
         background="transparent"
         speed={1}
         style={{ width: '200px', height: '200px' }}
         loop
         autoplay
-      ></dotlottie-player>
+      ></dotlottie-player> */}
+      {/* <FaSpinner className="animate-spin mr-2 text-[35px] text-blue-900 " /> */}
+      <div className="spinner border-t-[4px] border-b-[4px] border-blue-700 rounded-full w-8 h-8 animate-spin"></div>
     </div>
   );
 };

src/Components/user/profile/UserDetails.tsx

@@ -10,26 +10,34 @@ import { RootState } from '@/redux/store';
 import { format } from 'date-fns';
 import { updateUserAction } from '@/redux/store/actions/user/updateUserAction';
 import { getUserDataAction } from '@/redux/store/actions/auth/getUserDataAction';
+import { toast } from 'sonner'
+import { FaSpinner } from 'react-icons/fa';
+
 
 const UserDetails: React.FC = () => {
     const { data } = useAppSelector((state: RootState) => state.user)
     const [isEditing, setIsEditing] = useState(false);
-    const [profileImage, setProfileImage] = useState(data?.data?.profile?.avatar||"https://static.vecteezy.com/system/resources/thumbnails/001/840/612/small_2x/picture-profile-icon-male-icon-human-or-people-sign-and-symbol-free-vector.jpg");
+    const [profileImage, setProfileImage] = useState(data?.data?.profile?.avatar || "https://static.vecteezy.com/system/resources/thumbnails/001/840/612/small_2x/picture-profile-icon-male-icon-human-or-people-sign-and-symbol-free-vector.jpg");
     const fileInputRef = useRef<HTMLInputElement | null>(null);
     const dispatch = useAppDispatch()
     const [user, setUser] = useState<any>(null)
     const [loading, setLoading] = useState<boolean>(false)
+    const [isUploading, setUploading] = useState<boolean>(false)
+
+
+
+
+    useEffect(() => {
+        const getData = async () => {
+            await dispatch(getUserDataAction())
+            setProfileImage(data?.data?.profile?.avatar)
 
-    useEffect(()=>{
-        const getData = async () =>{
-           await dispatch(getUserDataAction())
-           setProfileImage(data?.data?.profile?.avatar)
-        } 
+        }
         getData()
-    },[dispatch])
+    }, [dispatch])
 
 
-const validationSchema = Yup.object().shape({
+    const validationSchema = Yup.object().shape({
         username: Yup.string().required('Username is required'),
         firstName: Yup.string().required('First name is required'),
         lastName: Yup.string().required('Last name is required'),
@@ -103,6 +111,7 @@ const validationSchema = Yup.object().shape({
         if (response.payload.success) {
             setUser(response.payload.data)
             setLoading(false)
+            toast.success('Updated Successfully!')
         }
 
 
@@ -118,11 +127,11 @@ const validationSchema = Yup.object().shape({
 
     const handleFileChange = async (file: File | null, setFieldValue: Function) => {
         if (file) {
-            console.log('this is log chage')
+            setUploading(true)
             const uploadedLink = await FileUpload(file);
-            console.log('this is updated data',uploadedLink.secure_url)
             setFieldValue('avatar', uploadedLink.secure_url)
             setProfileImage(uploadedLink.secure_url)
+            setUploading(false)
         }
     };
 
@@ -136,12 +145,20 @@ const validationSchema = Yup.object().shape({
                         alt="Profile"
                         className="w-24 h-24 rounded-full"
                     />
-                    <div
-                        className="absolute inset-0 flex items-center justify-center bg-gray-600 bg-opacity-50 rounded-full opacity-0 hover:opacity-100 transition-opacity duration-300 cursor-pointer"
-                        onClick={handleImageClick}
-                    >
-                        <CiEdit className="text-white text-2xl" />
-                    </div>
+                    {isEditing && (
+                        <>
+                            {isUploading ? (<div
+                                className="absolute inset-0 flex items-center justify-center bg-gray-600 bg-opacity-50 rounded-full opacity-0 hover:opacity-100 transition-opacity duration-300 cursor-pointer"
+                                onClick={handleImageClick}
+                            >
+                                <CiEdit className="text-white text-2xl" />
+                            </div>) : (<div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
+                                <FaSpinner className="animate-spin mr-2 text-[35px] text-blue-900 " />
+                            </div>)}
+                        </>
+
+                    )}
+
                 </div>
                 <div>
                     <h2 className="text-lg font-semibold">{initialValues.firstName} {initialValues.lastName}</h2>
@@ -292,7 +309,7 @@ const validationSchema = Yup.object().shape({
                     </Form>
                 )}
             </Formik>
-        </div>
+        </div >
     )
 };
 

src/Pages/auth/Login.tsx

@@ -16,6 +16,7 @@ import { FaEye, FaEyeSlash } from 'react-icons/fa';
 import { getUserDataAction } from '../../redux/store/actions/auth/getUserDataAction';
 import { motion } from 'framer-motion';
 import Footer from '@/Components/common/user/footer/footer';
+import {toast} from 'sonner'
 
 interface data {
   email: string;
@@ -41,10 +42,17 @@ const Login: React.FC = () => {
     const response = await dispatch(loginUserAction(values));
     console.log('this is first', response.payload);
     if (!response?.payload || !response?.payload.success) {
-      setError(true);
-      setTimeout(() => {
+      console.log('this is the actual error',response)
+      if(response?.payload){
+        setError(true);
+        setTimeout(() => {
+          setLoading(false);
+        }, 500);
+
+      }else{
+        toast.error('Network Error!')
         setLoading(false);
-      }, 500);
+      }
     } else {
       setError(false);
       setLoading(false);
@@ -128,11 +136,7 @@ const Login: React.FC = () => {
                     disabled={isSubmitting}
                     className="w-full bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
                   >
-                    {isSubmitting ? (
-    <div className="absolute inset-0 flex items-center justify-center">
-      <div className="spinner border-t-2 border-b-2 border-blue-500 rounded-full w-4 h-4 animate-spin"></div>
-    </div>
-  ) : 'Login'}
+                    {isSubmitting || isLoading ? 'Loading...': 'Login'}
                   </button>
                   <div className="flex items-center justify-between mt-2">
                     <p className='text-[12px] text-[gray]'>I don't have any account <a onClick={() => navigator('/signup', { state: location.state })} className="text-blue-500 text-sm font-bold cursor-pointer">Sign up</a></p>