如何在Flatlist的空白区域加载加载器，当项目需要很长时间渲染并产生空格时？

import React, { useState, useEffect } from 'react';
import { FlatList, ActivityIndicator, View, Text } from 'react-native';

const MyComponent = () => {
  const [data, setData] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // 模拟异步数据加载
    setTimeout(() => {
      const newData = [/* 数据源 */];
      setData(newData);
      setIsLoading(false);
    }, 2000);
  }, []);

  const renderLoader = () => {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator size="large" color="#0000ff" />
        <Text>Loading...</Text>
      </View>
    );
  };

  return (
    <FlatList
      data={data}
      renderItem={({ item }) => <Text>{item.title}</Text>}
      keyExtractor={(item) => item.id.toString()}
      ListEmptyComponent={isLoading ? renderLoader : null}
    />
  );
};

export default MyComponent;