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
-        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>
   );
 }

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>
   );
 }

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>
   );
 }

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>
   );
 }