Prevent showing initialData while fetching

app/javascript/components/contributing/ContributorsList.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { Pagination } from '@/components/common'
 import { TrackSelect } from '@/components/common/TrackSelect'
 import type { PaginatedResult, Contributor, Track } from '@/components/types'
@@ -39,6 +39,8 @@ export default function ContributorsList({
   tracks: readonly Track[]
 }): JSX.Element {
   const { request, setPage, setQuery } = useList(initialRequest)
+  const [currentData, setCurrentData] =
+    useState<PaginatedResult<readonly Contributor[]>>()
   const {
     status,
     data: resolvedData,
@@ -49,6 +51,10 @@ export default function ContributorsList({
     request
   )
 
+  useEffect(() => {
+    if (!isFetching) setCurrentData(resolvedData)
+  }, [isFetching, resolvedData])
+
   const requestQuery = useDeepMemo(request.query)
   const setQueryValue = useCallback(
     <K extends keyof QueryValueTypes>(key: K, value: QueryValueTypes[K]) => {
@@ -115,20 +121,20 @@ export default function ContributorsList({
           error={error}
           defaultError={DEFAULT_ERROR}
         >
-          {resolvedData ? (
+          {currentData ? (
             <>
               <div className="contributors">
-                {resolvedData.results.map((contributor) => (
+                {currentData.results.map((contributor) => (
                   <ContributorRow
                     contributor={contributor}
                     key={contributor.handle}
                   />
                 ))}
               </div>
               <Pagination
-                disabled={resolvedData === undefined}
+                disabled={currentData === undefined}
                 current={request.query.page || 1}
-                total={resolvedData.meta.totalPages}
+                total={currentData.meta.totalPages}
                 setPage={(p) => {
                   setPage(p)
                   scrollToTop('contributors-list', 32)

app/javascript/components/contributing/TasksList.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import pluralize from 'pluralize'
 import { Pagination } from '@/components/common'
 import { useDeepMemo } from '@/hooks/use-deep-memo'
@@ -66,6 +66,9 @@ export default function TasksList({
   tracks: readonly Track[]
 }): JSX.Element {
   const { request, setPage, setQuery, setOrder } = useList(initialRequest)
+  const [currentData, setCurrentData] = useState<
+    PaginatedResult<TaskProps[]> | undefined
+  >()
   const {
     status,
     data: resolvedData,
@@ -76,6 +79,10 @@ export default function TasksList({
     request
   )
 
+  useEffect(() => {
+    if (!isFetching) setCurrentData(resolvedData)
+  }, [isFetching, resolvedData])
+
   const track =
     tracks.find((t) => t.slug === request.query.trackSlug) || tracks[0]
   const isFiltering =
@@ -146,17 +153,17 @@ export default function TasksList({
           error={error}
           defaultError={DEFAULT_ERROR}
         >
-          {resolvedData ? (
+          {currentData ? (
             <React.Fragment>
               <header className="main-header c-search-bar">
                 <h2>
                   <strong className="block md:inline">
-                    Showing {resolvedData.meta.totalCount}{' '}
-                    {pluralize('task', resolvedData.meta.totalCount)}
+                    Showing {currentData.meta.totalCount}{' '}
+                    {pluralize('task', currentData.meta.totalCount)}
                   </strong>
                   <span className="hidden md:inline mr-8">/</span>
-                  out of {resolvedData.meta.unscopedTotal} possible{' '}
-                  {pluralize('task', resolvedData.meta.unscopedTotal)}
+                  out of {currentData.meta.unscopedTotal} possible{' '}
+                  {pluralize('task', currentData.meta.unscopedTotal)}
                 </h2>
                 {isFiltering ? <ResetButton onClick={handleReset} /> : null}
                 <Sorter
@@ -165,13 +172,13 @@ export default function TasksList({
                 />
               </header>
               <div className="tasks">
-                {resolvedData.results.map((task) => (
+                {currentData.results.map((task) => (
                   <Task task={task} key={task.uuid} />
                 ))}
                 <Pagination
-                  disabled={resolvedData === undefined}
+                  disabled={currentData === undefined}
                   current={request.query.page || 1}
-                  total={resolvedData.meta.totalPages}
+                  total={currentData.meta.totalPages}
                   setPage={(p) => {
                     setPage(p)
                     scrollToTop('tasks-list', 32)

app/javascript/components/track/ExerciseCommunitySolutionsList.tsx

@@ -3,7 +3,7 @@ import { usePaginatedRequestQuery, type Request } from '@/hooks/request-query'
 import { useHistory, removeEmpty } from '@/hooks/use-history'
 import { useList } from '@/hooks/use-list'
 import { scrollToTop } from '@/utils/scroll-to-top'
-import { Icon, Pagination } from '@/components/common'
+import { Pagination } from '@/components/common'
 import CommunitySolution from '../common/CommunitySolution'
 import { FetchingBoundary } from '@/components/FetchingBoundary'
 import { ResultsZone } from '@/components/ResultsZone'
@@ -52,6 +52,9 @@ export function ExerciseCommunitySolutionsList({
     setCriteria: setRequestCriteria,
   } = useList(initialRequest)
 
+  const [currentData, setCurrentData] =
+    useState<PaginatedResult<CommunitySolutionProps[]>>()
+
   const {
     status,
     data: resolvedData,
@@ -64,6 +67,11 @@ export function ExerciseCommunitySolutionsList({
     ['exercise-community-solution-list', request.endpoint, request.query],
     request
   )
+
+  useEffect(() => {
+    if (!isFetching) setCurrentData(resolvedData)
+  }, [isFetching, resolvedData])
+
   const [criteria, setCriteria] = useState(request.query.criteria)
   const [layout, setLayout] = useLocalStorage<`${'grid' | 'lines'}-layout`>(
     'community-solutions-layout',
@@ -92,7 +100,7 @@ export function ExerciseCommunitySolutionsList({
       data-scroll-top-anchor="exercise-community-solutions-list"
       className="lg-container c-community-solutions-list"
     >
-      {resolvedData ? <h2> Explore how others solved this exercise </h2> : null}
+      {currentData ? <h2> Explore how others solved this exercise </h2> : null}
       <div className="c-search-bar lg:flex-row flex-col gap-24">
         <input
           className="--search"
@@ -123,10 +131,10 @@ export function ExerciseCommunitySolutionsList({
           error={error}
           defaultError={DEFAULT_ERROR}
         >
-          {resolvedData ? (
+          {currentData ? (
             <React.Fragment>
               <div className={assembleClassNames('solutions', layout)}>
-                {resolvedData.results.map((solution) => {
+                {currentData.results.map((solution) => {
                   return (
                     <CommunitySolution
                       key={solution.uuid}
@@ -137,9 +145,9 @@ export function ExerciseCommunitySolutionsList({
                 })}
               </div>
               <Pagination
-                disabled={resolvedData === undefined}
+                disabled={currentData === undefined}
                 current={request.query.page || 1}
-                total={resolvedData.meta.totalPages}
+                total={currentData.meta.totalPages}
                 setPage={(p) => {
                   setPage(p)
                   scrollToTop('exercise-community-solutions-list', 32)