UIFriendlyList.tsx

import React from 'react'
import {FlatList, FlatListProps, Text} from 'react-native'
import LoadingIndicator from './LoadingIndicator'

export type UIFriendlyListProps<T> = FlatListProps<T> & {loading?: boolean}

export function UIFriendlyList<T>(props: UIFriendlyListProps<T>) {
  if (props.loading) {
    return <LoadingIndicator />
  }

  if (props?.data && props.data.length === 0) {
    return <Text>This list is empty (</Text>
  }

  return <FlatList {...props} />
}