Prevent flickering of empty lists on slow devices

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
+      {bests?.length === 0 ? (
-        style={{height: '99%'}}
+        <List.Item
-        ListEmptyComponent={
+          title="No exercises yet"
-          <List.Item
+          description="Once sets have been added, this will highlight your personal bests."
-            title="No exercises yet"
+        />
-            description="Once sets have been added, this will highlight your personal bests."
+      ) : (
-          />
+        <FlatList
-        }
+          style={{height: '99%'}}
-        renderItem={renderItem}
+          renderItem={renderItem}
-        data={bests}
+          data={bests}
-      />
+        />
+      )}
     </Page>
   );
 }

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
+      {plans?.length === 0 ? (
-        style={{height: '99%'}}
+        <List.Item
-        data={plans}
+          title="No plans yet"
-        renderItem={renderItem}
+          description="A plan is a list of workouts for certain days."
-        keyExtractor={set => set.id?.toString() || ''}
+        />
-        ListEmptyComponent={
+      ) : (
-          <List.Item
+        <FlatList
-            title="No plans yet"
+          style={{height: '99%'}}
-            description="A plan is a list of workouts for certain days."
+          data={plans}
-          />
+          renderItem={renderItem}
-        }
+          keyExtractor={set => set.id?.toString() || ''}
-      />
+        />
+      )}
     </Page>
   );
 }

SetList.tsx

@@ -87,19 +87,20 @@ export default function SetList() {
 
   return (
     <Page onAdd={onAdd} search={search} setSearch={setSearch}>
-      <FlatList
+      {sets?.length === 0 ? (
-        data={sets}
+        <List.Item
-        style={{height: '99%'}}
+          title="No sets yet"
-        ListEmptyComponent={
+          description="A set is a group of repetitions. E.g. 8 reps of Squats."
-          <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}
+          renderItem={renderItem}
-        keyExtractor={s => s.id!.toString()}
+          keyExtractor={s => s.id!.toString()}
-        onEndReached={next}
+          onEndReached={next}
-      />
+        />
+      )}
     </Page>
   );
 }

WorkoutList.tsx

@@ -80,19 +80,20 @@ export default function WorkoutList() {
 
   return (
     <Page onAdd={onAdd} search={search} setSearch={setSearch}>
-      <FlatList
+      {workouts?.length === 0 ? (
-        data={workouts}
+        <List.Item
-        style={{height: '99%'}}
+          title="No workouts yet."
-        ListEmptyComponent={
+          description="A workout is something you do at the gym. For example Deadlifts are a workout."
-          <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}
+          renderItem={renderItem}
-        keyExtractor={w => w.name}
+          keyExtractor={w => w.name}
-        onEndReached={next}
+          onEndReached={next}
-      />
+        />
+      )}
     </Page>
   );
 }