From 52f82410541f9fe49bf14f641783ee0ac66fc3a6 Mon Sep 17 00:00:00 2001
From: Brandon Presley <brandon@presley.nz>
Date: Thu, 13 Oct 2022 16:30:02 +1300
Subject: [PATCH] Prevent flickering of empty lists on slow devices

---
 BestList.tsx    | 25 +++++++++++++------------
 PlanList.tsx    | 27 ++++++++++++++-------------
 SetList.tsx     | 27 ++++++++++++++-------------
 WorkoutList.tsx | 27 ++++++++++++++-------------
 4 files changed, 55 insertions(+), 51 deletions(-)

diff --git a/BestList.tsx b/BestList.tsx
index 1133ad0..eef96b8 100644
--- a/BestList.tsx
+++ b/BestList.tsx
@@ -13,7 +13,7 @@ import Set from './set';
 import {useSettings} from './use-settings';
 
 export default function BestList() {
-  const [bests, setBests] = useState<Set[]>([]);
+  const [bests, setBests] = useState<Set[]>();
   const [search, setSearch] = useState('');
   const navigation = useNavigation<NavigationProp<BestPageParams>>();
   const {settings} = useSettings();
@@ -59,17 +59,18 @@ export default function BestList() {
 
   return (
     <Page search={search} setSearch={setSearch}>
-      <FlatList
-        style={{height: '99%'}}
-        ListEmptyComponent={
-          <List.Item
-            title="No exercises yet"
-            description="Once sets have been added, this will highlight your personal bests."
-          />
-        }
-        renderItem={renderItem}
-        data={bests}
-      />
+      {bests?.length === 0 ? (
+        <List.Item
+          title="No exercises yet"
+          description="Once sets have been added, this will highlight your personal bests."
+        />
+      ) : (
+        <FlatList
+          style={{height: '99%'}}
+          renderItem={renderItem}
+          data={bests}
+        />
+      )}
     </Page>
   );
 }
diff --git a/PlanList.tsx b/PlanList.tsx
index ccf3c1b..06d1561 100644
--- a/PlanList.tsx
+++ b/PlanList.tsx
@@ -15,7 +15,7 @@ import PlanItem from './PlanItem';
 
 export default function PlanList() {
   const [search, setSearch] = useState('');
-  const [plans, setPlans] = useState<Plan[]>([]);
+  const [plans, setPlans] = useState<Plan[]>();
   const navigation = useNavigation<NavigationProp<PlanPageParams>>();
 
   const refresh = useCallback(async () => {
@@ -47,18 +47,19 @@ export default function PlanList() {
 
   return (
     <Page onAdd={onAdd} search={search} setSearch={setSearch}>
-      <FlatList
-        style={{height: '99%'}}
-        data={plans}
-        renderItem={renderItem}
-        keyExtractor={set => set.id?.toString() || ''}
-        ListEmptyComponent={
-          <List.Item
-            title="No plans yet"
-            description="A plan is a list of workouts for certain days."
-          />
-        }
-      />
+      {plans?.length === 0 ? (
+        <List.Item
+          title="No plans yet"
+          description="A plan is a list of workouts for certain days."
+        />
+      ) : (
+        <FlatList
+          style={{height: '99%'}}
+          data={plans}
+          renderItem={renderItem}
+          keyExtractor={set => set.id?.toString() || ''}
+        />
+      )}
     </Page>
   );
 }
diff --git a/SetList.tsx b/SetList.tsx
index d6fadf0..55423c3 100644
--- a/SetList.tsx
+++ b/SetList.tsx
@@ -87,19 +87,20 @@ export default function SetList() {
 
   return (
     <Page onAdd={onAdd} search={search} setSearch={setSearch}>
-      <FlatList
-        data={sets}
-        style={{height: '99%'}}
-        ListEmptyComponent={
-          <List.Item
-            title="No sets yet"
-            description="A set is a group of repetitions. E.g. 8 reps of Squats."
-          />
-        }
-        renderItem={renderItem}
-        keyExtractor={s => s.id!.toString()}
-        onEndReached={next}
-      />
+      {sets?.length === 0 ? (
+        <List.Item
+          title="No sets yet"
+          description="A set is a group of repetitions. E.g. 8 reps of Squats."
+        />
+      ) : (
+        <FlatList
+          data={sets}
+          style={{height: '99%'}}
+          renderItem={renderItem}
+          keyExtractor={s => s.id!.toString()}
+          onEndReached={next}
+        />
+      )}
     </Page>
   );
 }
diff --git a/WorkoutList.tsx b/WorkoutList.tsx
index 85bfadb..41dca82 100644
--- a/WorkoutList.tsx
+++ b/WorkoutList.tsx
@@ -80,19 +80,20 @@ export default function WorkoutList() {
 
   return (
     <Page onAdd={onAdd} search={search} setSearch={setSearch}>
-      <FlatList
-        data={workouts}
-        style={{height: '99%'}}
-        ListEmptyComponent={
-          <List.Item
-            title="No workouts yet."
-            description="A workout is something you do at the gym. For example Deadlifts are a workout."
-          />
-        }
-        renderItem={renderItem}
-        keyExtractor={w => w.name}
-        onEndReached={next}
-      />
+      {workouts?.length === 0 ? (
+        <List.Item
+          title="No workouts yet."
+          description="A workout is something you do at the gym. For example Deadlifts are a workout."
+        />
+      ) : (
+        <FlatList
+          data={workouts}
+          style={{height: '99%'}}
+          renderItem={renderItem}
+          keyExtractor={w => w.name}
+          onEndReached={next}
+        />
+      )}
     </Page>
   );
 }