add activity indicator to period details modal and adjust styling to make it visible

components/chart/loading-more.js

@@ -18,7 +18,7 @@ LoadingMoreView.propTypes = {
 
 const styles = StyleSheet.create({
   loadingContainer: {
-    height: '100%',
+    height: 80,
     backgroundColor: Colors.turquoiseLight,
     justifyContent: 'center',
   },

components/stats/PeriodDetailsModal.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import { FlatList, StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
 import { useTranslation } from 'react-i18next'
@@ -9,6 +9,7 @@ import AppText from '../common/app-text'
 import cycleModule from '../../lib/cycle'
 import { Spacing, Typography, Colors } from '../../styles'
 import { humanizeDate } from '../helpers/format-date'
+import LoadingMoreView from '../chart/loading-more'
 
 const Item = ({ data }) => {
   const { t } = useTranslation(null, { keyPrefix: 'plurals' })
@@ -39,21 +40,36 @@ Item.propTypes = {
 const PeriodDetailsModal = ({ onClose }) => {
   const renderItem = ({ item }) => <Item data={item} />
   const data = cycleModule().getStats()
+  const [endReached, setEndReached] = useState(false)
 
   if (!data || data.length === 0) return false
 
+  // const ITEM_HEIGHT = 50;
+  
+  // const getItemLayout = (data, index) => ({
+  //   length: ITEM_HEIGHT,
+  //   offset: ITEM_HEIGHT * index,
+  //   index
+  // });
+
   return (
     <AppModal onClose={onClose}>
       <View>
         <FlatList
           data={data}
           renderItem={renderItem}
+          // getItemLayout={getItemLayout} 
           keyExtractor={(item) => item.date}
           ItemSeparatorComponent={ItemDivider}
           ListHeaderComponent={FlatListHeader}
           ListHeaderComponentStyle={styles.headerDivider}
           stickyHeaderIndices={[0]}
+          windowSize={4}
           contentContainerStyle={styles.container}
+          onEndReached={() => setEndReached(true)}
+          onEndReachedThreshold={0.1}
+          ListFooterComponent={<LoadingMoreView end={endReached} />}
+          updateCellsBatchingPeriod={100}
         />
       </View>
     </AppModal>