Stop using isvalidating (#478)

Using isValidating, we see flickering in the UI because we don't use the caching of SWR optimally. We only need to check whether there is some data available, expired or not.
evroon · Feb 15, 2024 · 15870bf · 15870bf
1 parent b40ff6d
commit 15870bf
Show file tree

Hide file tree

Showing 7 changed files with 7 additions and 12 deletions.
diff --git a/frontend/src/components/tables/clubs.tsx b/frontend/src/components/tables/clubs.tsx
@@ -18,7 +18,7 @@ export default function ClubsTable({ swrClubsResponse }: { swrClubsResponse: SWR
   const { t } = useTranslation();
 
   if (swrClubsResponse.error) return <RequestErrorAlert error={swrClubsResponse.error} />;
-  if (swrClubsResponse.isLoading || swrClubsResponse.isValidating) {
+  if (swrClubsResponse.isLoading) {
     return <TableSkeletonSingleColumn />;
   }
 

diff --git a/frontend/src/components/tables/courts.tsx b/frontend/src/components/tables/courts.tsx
@@ -24,7 +24,7 @@ export default function CourtsTable({
   const courts: Court[] = swrCourtsResponse.data != null ? swrCourtsResponse.data.data : [];
   const tableState = getTableState('id');
 
-  if (swrCourtsResponse.isLoading || swrCourtsResponse.isValidating) {
+  if (swrCourtsResponse.isLoading) {
     return <TableSkeletonSingleColumn />;
   }
 

diff --git a/frontend/src/components/tables/players.tsx b/frontend/src/components/tables/players.tsx
@@ -53,7 +53,7 @@ export default function PlayersTable({
 
   if (swrPlayersResponse.error) return <RequestErrorAlert error={swrPlayersResponse.error} />;
 
-  if (swrPlayersResponse.isLoading || swrPlayersResponse.isValidating) {
+  if (swrPlayersResponse.isLoading) {
     return <TableSkeletonSingleColumn />;
   }
 

diff --git a/frontend/src/components/tables/teams.tsx b/frontend/src/components/tables/teams.tsx
@@ -28,7 +28,7 @@ export default function TeamsTable({
   const tableState = getTableState('name');
   if (swrTeamsResponse.error) return <RequestErrorAlert error={swrTeamsResponse.error} />;
 
-  if (swrTeamsResponse.isLoading || swrTeamsResponse.isValidating) {
+  if (swrTeamsResponse.isLoading) {
     return <TableSkeletonSingleColumn />;
   }
 

diff --git a/frontend/src/components/tables/tournaments.tsx b/frontend/src/components/tables/tournaments.tsx
@@ -27,7 +27,7 @@ export default function TournamentsTable({
   if (swrTournamentsResponse.error) {
     return <RequestErrorAlert error={swrTournamentsResponse.error} />;
   }
-  if (swrTournamentsResponse.isLoading || swrTournamentsResponse.isValidating) {
+  if (swrTournamentsResponse.isLoading) {
     return <TableSkeletonSingleColumn />;
   }
 

diff --git a/frontend/src/pages/tournaments/[id]/stages.tsx b/frontend/src/pages/tournaments/[id]/stages.tsx
@@ -28,12 +28,7 @@ export default function StagesPage() {
     swrStagesResponse.data != null ? swrStagesResponse.data.data : [];
 
   let content;
-  if (
-    swrStagesResponse.isLoading ||
-    swrTournamentResponse.isLoading ||
-    swrStagesResponse.isValidating ||
-    swrTournamentResponse.isValidating
-  ) {
+  if (swrStagesResponse.isLoading || swrTournamentResponse.isLoading) {
     content = <TableSkeletonTwoColumnsSmall />;
   } else if (stages.length < 1) {
     content = (

diff --git a/frontend/src/pages/user.tsx b/frontend/src/pages/user.tsx
@@ -23,7 +23,7 @@ export default function HomePage() {
   let content;
   content = user != null ? <UserForm user={user} /> : null;
 
-  if (swrUserResponse.isValidating || swrUserResponse.isLoading) {
+  if (swrUserResponse.isLoading) {
     content = (
       <Group maw="40rem">
         <TableSkeletonSingleColumn />