loading wishlist

components/detail/WIshlistComponent.js

@@ -4,11 +4,11 @@ import { useDispatch, useSelector } from "react-redux";
 import { checkWishlist, deleteWishlist, getWishlists, toggleWishlist } from "../../redux/actions/activityAction";
 
 const WishlistComponent = ({ activityId, userId }) => {
-  const { wishlists } = useSelector(state => state.wishlists);
+  const { wishlists, loading } = useSelector(state => state.wishlists);
   const [isActive, setisActive] = useState(false);
   const [wishlistId, setwishlistId] = useState();
   const dispatch = useDispatch();
-//   console.log("wishlists", wishlists);
+  //   console.log("wishlists", wishlists);
   useEffect(() => {
     wishlists &&
       wishlists.length > 0 &&

pages/user/wishlist/index.js

@@ -2,12 +2,19 @@ import React from "react";
 import Layout from "../../../components/layout/Layout";
 import MyWhishList from "../../../components/user/MyWhishList";
 import { useSelector } from "react-redux";
+import { Skeleton } from "antd";
 
 export default function UserProfilePage() {
-    const { wishlists } = useSelector(state => state.wishlists)
-    return (
-        <Layout>
-            <MyWhishList data={wishlists}/>
-        </Layout>
-    );
-};
\ No newline at end of file
+  const { wishlists, loading } = useSelector(state => state.wishlists);
+  return (
+    <Layout>
+      {loading ? (
+        <div>
+          <Skeleton active />
+        </div>
+      ) : (
+        <MyWhishList data={wishlists} />
+      )}
+    </Layout>
+  );
+}

redux/actions/activityAction.js

@@ -530,7 +530,8 @@ export const getWishlists =
         return;
       }
       dispatch({
-        type: GET_WISHLISTS_REQUEST
+        type: GET_WISHLISTS_REQUEST,
+        loading: true
       });
       const config = {
         headers: {
@@ -557,7 +558,8 @@ export const getWishlists =
       const response = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/wishlists?${queryString}`, config);
       dispatch({
         type: GET_WISHLISTS_SUCCESS,
-        payload: response.data.data
+        payload: response.data.data,
+        loading: false
       });
 
       return response.data.data;