Merge pull request #909 from dacadeorg/feat/add-loader-to-bounties-fetch

feat: add loader when fetching bounties

Author: musayann

src/components/list/Bounty.tsx

@@ -3,6 +3,9 @@ import Bounty from "@/components/cards/Bounty";
 import { Bounty as BountyType } from "@/types/bounty";
 import { ReactElement } from "react";
 import { Referral as ReferralType } from "@/types/community";
+import Loader from "../ui/Loader";
+import { IRootState } from "@/store";
+import { useSelector } from "@/hooks/useTypedSelector";
 
 /**
  * BountyList component props
@@ -28,9 +31,10 @@ interface BountyListProps {
  * @returns {ReactElement}
  */
 export default function BountyList({ bounties = [], referrals = [] }: BountyListProps): ReactElement {
+  const loading = useSelector((state: IRootState) => state.bounties.isLoading)
   return (
     <div>
-      {bounties && (
+      {bounties && !loading ? (
         <div className="relative w-full px-0 mb-10 space-y-0 overflow-hidden divide-y divide-gray-200 bg-gray-50 rounded-3xl lg:max-w-2xl">
           {referrals.map((referral) => (
             <Referral referral={referral} key={referral.name} />
@@ -39,7 +43,9 @@ export default function BountyList({ bounties = [], referrals = [] }: BountyList
             <Bounty bounty={bounty} key={bounty.id} />
           ))}
         </div>
-      )}
+      ) : <div className="h-24 sm:h-48 grid place-items-center">
+        <Loader />
+      </div>}
     </div>
   );
 }

src/store/feature/bouties.slice.ts

@@ -5,11 +5,13 @@ import { IRootState } from "..";
 interface InitialState {
   bountiesList: Bounty[];
   filteredBountyList: Bounty[];
+  isLoading: boolean;
 }
 
 const initialState: InitialState = {
   bountiesList: [],
   filteredBountyList: [],
+  isLoading: false
 };
 
 /**
@@ -28,10 +30,13 @@ const bountiesSlice = createSlice({
     setFilteredBountiesList: (state, action: PayloadAction<Bounty[]>) => {
       state.filteredBountyList = action.payload;
     },
+    setLoading: (state, action) => {
+      state.isLoading = action.payload;
+    }
   },
 });
 
-export const { setBountiesList, setFilteredBountiesList } = bountiesSlice.actions;
+export const { setBountiesList, setFilteredBountiesList, setLoading } = bountiesSlice.actions;
 
 /**
  * Find bouties by slug

src/store/services/bounties.service.ts

@@ -1,6 +1,6 @@
 import baseQuery from "@/config/baseQuery";
 import { createApi } from "@reduxjs/toolkit/dist/query";
-import { setBountiesList } from "../feature/bouties.slice";
+import { setBountiesList, setLoading } from "../feature/bouties.slice";
 import { HYDRATE } from "next-redux-wrapper";
 import { setBusy, setError } from "../feature/index.slice";
 
@@ -23,9 +23,12 @@ const bountiesService = createApi({
     getBounties: builder.query({
       query: () => "bounties",
       onQueryStarted: async (slug, { dispatch, queryFulfilled }) => {
+        dispatch(setLoading(true))
         try {
           const { data } = await queryFulfilled;
-          dispatch(setBountiesList(data));
+          if (data) dispatch(setBountiesList(data));
+          dispatch(setLoading(false))
+          return data
         } catch (error) {
           dispatch(setBusy(false));
           dispatch(setError(error));