feat: add spinner when its loading

Author: serapieTuyishime

src/components/badges/RewardBadge.tsx

@@ -36,7 +36,7 @@ interface RewardBadgeProps {
 export default function RewardBadge({ reward = {}, type = "transparent", displayAmount = true }: RewardBadgeProps): ReactElement {
   const { token, amount } = reward;
 
-  const badgeClassnames = classNames("font-semibold leading-none text-center inline-flex items-center justify-between rounded-full text-xs p-0.5 h-5 space-x-2", {
+  const badgeClassnames = classNames("font-semibold leading-none text-center inline-flex items-center justify-between rounded-full text-xs p-0.5 h-5 space-x-2-", {
     "bg-white bg-opacity-25 text-white": type === "transparent",
     "bg-gray-200 text-gray-500": type === "gray",
     "bg-gray-100 text-gray-500": type === "light-gray",

src/components/cards/profile/Referral.tsx

@@ -1,12 +1,13 @@
 import { ReactElement, useMemo } from "react";
 import Avatar from "@/components/ui/Avatar";
-import RewardBadge from "@/components/badges/RewardBadge";
 import DateManager from "@/utilities/DateManager";
 import { useTranslation } from "next-i18next";
 import { useRouter } from "next/router";
 import { Referral as ReferralType } from "@/types/community";
 import Link from "next/link";
 import TimeIcon from "@/icons/time.svg";
+import RewardBadge from "@/components/badges/RewardBadge";
+import { Evaluation } from "@/types/bounty";
 
 interface ReferralProps {
   referral: ReferralType;
@@ -29,13 +30,13 @@ export default function Referral({ referral }: ReferralProps): ReactElement {
   const joinedAt = useMemo(() => DateManager.fromNow(referral.created_at, locale), [locale, referral.created_at]);
   const rewardAt = useMemo(() => (referral.rewarded ? DateManager.fromNow(referral.updated_at, locale) : null), [locale, referral.rewarded, referral.updated_at]);
 
-  const status = (evaluation: any) => {
+  const status = (evaluation: Evaluation) => {
     if (!evaluation) return t("referrals.challenge.evaluation.status.pending")
     return t(evaluation?.reward ? "referrals.challenge.evaluation.status.passed" : "referrals.challenge.evaluation.status.failed")
   }
 
-  const formatDate = (date: any) => {
-    return date ? DateManager.fromNow(date, 'en') : null
+  const formatDate = (date: Date) => {
+    return date ? DateManager.fromNow(date, locale) : null
   }
   return (
     <div className="text-sm text-gray-700 bg-gray-50 md:mb-0 p-7">
@@ -64,15 +65,15 @@ export default function Referral({ referral }: ReferralProps): ReactElement {
               ) : <></>}
 
               {referral?.rewarded && referral.metadata && referral.metadata.reward && (
-                <li className="pt-4 grid gap-2 md:flex md: justify-between">
-                  <span className="grid gap-2 md:flex items-center">
+                <li className="pt-4 grid gap-2 md:gap-0 md:flex md:justify-between">
+                  <span className="grid gap-2 md:flex">
                     <span>{t("referrals.reward.text")}</span>
-                    <span className="font-bold flex">
+                    <span className="font-bold flex justify-start">
                       <RewardBadge type="gray" reward={referral.metadata.reward} />
                     </span>
                   </span>
 
-                  <span className="hidden md:inline-block text-gray-500">{rewardAt}</span>
+                  <span className="text-gray-500">{rewardAt}</span>
                 </li>
               )}
             </ul>

src/components/ui/SideNavigation/index.tsx

@@ -16,7 +16,7 @@ export default function SideNavigation({ items, colors, children }: { items: Ite
   const { t } = useTranslation();
   return (
     <ThemeWrapper colors={colors}>
-      <ul className="relative bg-red-400">
+      <ul className="relative">
         {items.length ? (
           items.map((menu, index) => {
             return (

src/pages/profile/referrals.tsx

@@ -16,6 +16,8 @@ import { IRootState } from "@/store";
 import Loader from "@/components/ui/button/Loader";
 import ProfileOverviewSection from "@/components/sections/profile/overview/Section";
 import ReferralsList from "@/components/list/ReferralsList";
+import Spinner from "@/components/ui/Loader";
+
 
 /**
  * interface for UserReferrals multiSelector
@@ -28,6 +30,7 @@ interface UserReferralsMultiSelector {
   user: User | null;
   referrals: ReferralType[];
   hasMore: boolean;
+  loading: boolean
 }
 
 /**
@@ -39,11 +42,12 @@ interface UserReferralsMultiSelector {
 export default function UserReferrals(): ReactElement {
   const { t } = useTranslation();
   const [page, setPage] = useState(0);
-  const [loading, setLoading] = useState(false);
-  const { user, referrals, hasMore } = useMultiSelector<unknown, UserReferralsMultiSelector>({
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
+  const { user, referrals, hasMore, loading } = useMultiSelector<unknown, UserReferralsMultiSelector>({
     user: (state: IRootState) => state.user.data,
     referrals: (state: IRootState) => state.userReferrals.userReferralList,
     hasMore: (state: IRootState) => state.userReferrals.hasMore,
+    loading: (state: IRootState) => state.userReferrals.loading
   });
   const dispatch = useDispatch();
   const showLoadMore = useMemo(() => hasMore && referrals?.length >= 10, [referrals?.length, hasMore]);
@@ -55,13 +59,14 @@ export default function UserReferrals(): ReactElement {
   }, [dispatch, user?.referrals]);
 
   const nextPage = async () => {
-    if (loading || !hasMore) return;
-    setLoading(true);
+    if (isLoadingMore || !hasMore) return;
+    setIsLoadingMore(true);
     const referralId = referrals[referrals.length - 1]?.id || null;
     await dispatch(userFetchReferrals({ startAfter: referralId || null }));
     setPage(page + 1);
-    setLoading(false);
+    setIsLoadingMore(false);
   };
+  if (loading && !referrals.length) return <Spinner className="py-32" />;
 
   return (
     <div className="grid gap-7.5">
@@ -82,7 +87,7 @@ export default function UserReferrals(): ReactElement {
                   <Referral key={`user-referral-${i}`} referral={referral} />
                 ))}
               </InfiniteScroll>
-              {loading && <Loader loading={loading} className="absolute left-6 -bottom-7.5" onClick={() => nextPage()} />}
+              {isLoadingMore && <Loader loading={isLoadingMore} className="absolute left-6 -bottom-7.5" onClick={() => nextPage()} />}
             </div>
           ) : (
             <div className="w-full border bg-gray-50 border-gray-200 border-solid rounded-3xl text-gray-500 p-6.5 font-semibold">{t('referrals.empty-state.subtitle')}</div>

src/store/feature/user/referrals.slice.ts

@@ -10,13 +10,15 @@ interface UserReferralsState {
   current: Referral | null;
   hasMore: boolean;
   count: number;
+  loading: boolean;
 }
 
 const initialState: UserReferralsState = {
   userReferralList: [],
   current: null,
   hasMore: true,
   count: 0,
+  loading: false,
 };
 
 /**
@@ -40,12 +42,16 @@ const userReferralsSlice = createSlice({
     setHasMoreReferrals: (state, action) => {
       state.hasMore = action.payload;
     },
+
     setCount: (state, action) => {
       state.count = action.payload;
     },
+    setLoading: (state, action) => {
+      state.loading = action.payload;
+    },
   },
 });
 
-export const { setCurrent, clear, setUserReferralsList, setHasMoreReferrals, setCount } = userReferralsSlice.actions;
+export const { setCurrent, clear, setUserReferralsList, setHasMoreReferrals, setCount, setLoading } = userReferralsSlice.actions;
 
 export default userReferralsSlice;

src/store/services/referrals.service.ts

@@ -1,7 +1,7 @@
 import baseQuery from "@/config/baseQuery";
 import { createApi } from "@reduxjs/toolkit/dist/query";
 import { setReferralsList } from "../feature/referrals.slice";
-import { clear, setUserReferralsList, setHasMoreReferrals, setCount } from "../feature/user/referrals.slice";
+import { clear, setUserReferralsList, setHasMoreReferrals, setCount, setLoading } from "../feature/user/referrals.slice";
 import { Referral } from "@/types/community";
 
 /**
@@ -35,6 +35,7 @@ const referralsService = createApi({
       onQueryStarted: async ({ startAfter }, { dispatch, queryFulfilled, getState }) => {
         const state = getState() as any;
         try {
+          dispatch(setLoading(true))
           const { data } = await queryFulfilled;
           const list: Referral[] = [];
           if (startAfter) {
@@ -47,6 +48,8 @@ const referralsService = createApi({
           dispatch(setUserReferralsList(list));
           dispatch(setCount(data?.count));
           dispatch(setHasMoreReferrals(data?.list?.length > 0 ? true : false));
+          dispatch(setLoading(false))
+
         } catch (error) {
           console.log("error in fetching the userFetchReferrals ", error);
         }