pages/index.tsx: Dehydrate query client (#1564)

* pages/index.tsx: Dehydrate client
Needed to update the query state from prefetchQuery on the client. Improves loading time significantly.

-hook/campaigns:Remove staleTime from the useCampaignList.
Showing stale data, might confuse donors, as they expect their donation to be showed immediately.

* ActiveCampaignsSection.tsx: Use campaign.id as key
index is not quite good for a key, to track changes of array items

src/common/hooks/campaigns.ts

@@ -43,10 +43,6 @@ export function useCampaignList() {
   return useQuery<CampaignResponse[]>(
     [endpoints.campaign.listCampaigns.url],
     campaignsOrderQueryFunction,
-    {
-      // Add 15 minutes of cache time
-      staleTime: 1000 * 60 * 15,
-    },
   )
 }
 

src/components/client/campaigns/CampaignProgress.tsx

@@ -27,6 +27,7 @@ export default function CampaignProgress({ campaignId, raised, target }: Props)
       labelSize={theme.spacing(1.5)}
       labelAlignment={percentageRound < 10 ? 'left' : 'right'}
       customLabelStyles={{ fontWeight: 400 }}
+      animateOnRender={true}
     />
   )
 }

src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignsSection.tsx

@@ -26,7 +26,7 @@ export default function ActiveCampaignsSection() {
       <Root>
         <ActiveCampaignsWrapper>
           {activeCampaigns?.map((campaign, index) => (
-            <ActiveCampaignCard index={index} key={index} campaign={campaign} />
+            <ActiveCampaignCard index={index} key={campaign.id} campaign={campaign} />
           ))}
         </ActiveCampaignsWrapper>{' '}
         <SeeAllButtonWrapper>

src/pages/index.tsx

@@ -1,7 +1,7 @@
 import { Session, getServerSession } from 'next-auth'
 import { GetServerSideProps } from 'next'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
-import { QueryClient } from '@tanstack/react-query'
+import { QueryClient, dehydrate } from '@tanstack/react-query'
 
 import IndexPage from 'components/client/index/IndexPage'
 import { campaignsOrderQueryFunction } from 'common/hooks/campaigns'
@@ -26,6 +26,7 @@ export const getServerSideProps: GetServerSideProps<{
     props: {
       ...(await serverSideTranslations(ctx.locale ?? 'bg', ['common', 'index', 'campaigns'])),
       session,
+      dehydratedState: dehydrate(client),
     },
   }
 }