From 15870bfbb16583b2bf53977cca9ebd3ad35b5bf5 Mon Sep 17 00:00:00 2001
From: Erik Vroon <erik.vroon22@gmail.com>
Date: Thu, 15 Feb 2024 19:17:35 +0100
Subject: [PATCH] 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.
---
 frontend/src/components/tables/clubs.tsx       | 2 +-
 frontend/src/components/tables/courts.tsx      | 2 +-
 frontend/src/components/tables/players.tsx     | 2 +-
 frontend/src/components/tables/teams.tsx       | 2 +-
 frontend/src/components/tables/tournaments.tsx | 2 +-
 frontend/src/pages/tournaments/[id]/stages.tsx | 7 +------
 frontend/src/pages/user.tsx                    | 2 +-
 7 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/tables/clubs.tsx b/frontend/src/components/tables/clubs.tsx
index 0e2a9009..804ee9b2 100644
--- 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
index 2a43e7ec..4ada92bf 100644
--- 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
index 8d757d1f..55fcc191 100644
--- 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
index 179e96ee..05ca6fb6 100644
--- 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
index c473554a..f8c29760 100644
--- 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
index 6fde05f9..bacd906b 100644
--- 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
index 138d1486..6d9834a5 100644
--- 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 />