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%'}}
-        ListEmptyComponent={
         <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>
   );
 }

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}>
+      {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() || ''}
-        ListEmptyComponent={
-          <List.Item
-            title="No plans yet"
-            description="A plan is a list of workouts for certain days."
-          />
-        }
         />
+      )}
     </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}
-        style={{height: '99%'}}
-        ListEmptyComponent={
         <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>
   );
 }

WorkoutList.tsx

@@ -80,19 +80,20 @@ export default function WorkoutList() {
 
   return (
     <Page onAdd={onAdd} search={search} setSearch={setSearch}>
-      <FlatList
+      {workouts?.length === 0 ? (
-        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."
         />
-        }
+      ) : (
+        <FlatList
+          data={workouts}
+          style={{height: '99%'}}
           renderItem={renderItem}
           keyExtractor={w => w.name}
           onEndReached={next}
         />
+      )}
     </Page>
   );
 }