Add loading screen to data import

components/app-loading.js

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import { View } from 'react-native'
+
+import AppText from './app-text'
+import { shared } from '../i18n/en/labels'
+
+const AppLoadingView = () => {
+  return (
+    <View flex={1}>
+      <View  style={{flex:1, justifyContent: 'center'}}>
+        <AppText style={{alignSelf: 'center'}}>{shared.loading}</AppText>
+      </View>
+    </View>
+  )
+}
+
+export default AppLoadingView

components/chart/chart.js

@@ -10,6 +10,7 @@ import { cycleDayColor } from '../../styles'
 import { scaleObservable } from '../../local-storage'
 import config from '../../config'
 import AppText from '../app-text'
+import AppLoadingView from '../app-loading'
 import { shared as labels } from '../../i18n/en/labels'
 import DripIcon from '../../assets/drip-icons'
 import DripHomeIcon from '../../assets/drip-home-icons'
@@ -133,11 +134,7 @@ export default class CycleChart extends Component {
         onLayout={this.onLayout}
         style={{ flexDirection: 'row', flex: 1 }}
       >
-        {!this.state.chartLoaded &&
+        {!this.state.chartLoaded && <AppLoadingView />}
-          <View style={{width: '100%', justifyContent: 'center', alignItems: 'center'}}>
-            <AppText>{labels.loading}</AppText>
-          </View>
-        }
 
         {this.state.chartHeight && this.state.chartLoaded &&
           <View>

components/settings/data-management/import-dialog.js

@@ -6,23 +6,23 @@ import { shared as sharedLabels } from '../../../i18n/en/labels'
 import labels from '../../../i18n/en/settings'
 import alertError from '../shared/alert-error'
 
-export default function openImportDialogAndImport() {
+export function openImportDialog(onImportData) {
   Alert.alert(
     labels.import.title,
     labels.import.message,
     [{
       text: labels.import.replaceOption,
-      onPress: () => getFileContentAndImport({ deleteExisting: false })
+      onPress: () => onImportData(false)
     }, {
       text: labels.import.deleteOption,
-      onPress: () => getFileContentAndImport({ deleteExisting: true })
+      onPress: () => onImportData(true)
     }, {
       text: sharedLabels.cancel, style: 'cancel', onPress: () => { }
     }]
   )
 }
 
-async function getFileContentAndImport({ deleteExisting }) {
+export async function getFileContent() {
   let fileInfo
   try {
     fileInfo = await new Promise((resolve, reject) => {
@@ -45,8 +45,13 @@ async function getFileContentAndImport({ deleteExisting }) {
     return importError(labels.import.errors.couldNotOpenFile)
   }
 
+  return fileContent
+}
+
+export async function importData(shouldDeleteExistingData, fileContent) {
+
   try {
-    await importCsv(fileContent, deleteExisting)
+    await importCsv(fileContent, shouldDeleteExistingData)
     Alert.alert(sharedLabels.successTitle, labels.import.success.message)
   } catch(err) {
     importError(err.message)

components/settings/data-management/index.js

@@ -1,37 +1,76 @@
-import React from 'react'
+import React, { Component } from 'react'
-import { ScrollView } from 'react-native'
+import { ScrollView, View } from 'react-native'
 import AppText from '../../app-text'
 import FramedSegment from '../../framed-segment'
+import AppLoadingView from '../../app-loading'
 import SettingsButton from '../shared/settings-button'
-import openImportDialogAndImport from './import-dialog'
+import { openImportDialog, getFileContent, importData } from './import-dialog'
 import openShareDialogAndExport from './export-dialog'
 import DeleteData from './delete-data'
 import labels from '../../../i18n/en/settings'
 
-const DataManagement = () => {
+export default class DataManagement extends Component {
-  return (
-    <ScrollView>
-      <FramedSegment title={labels.export.button}>
-        <AppText>{labels.export.segmentExplainer}</AppText>
-        <SettingsButton onPress={openShareDialogAndExport}>
-          {labels.export.button}
-        </SettingsButton>
-      </FramedSegment>
-      <FramedSegment title={labels.import.button}>
-        <AppText>{labels.import.segmentExplainer}</AppText>
-        <SettingsButton onPress={openImportDialogAndImport}>
-          {labels.import.button}
-        </SettingsButton>
-      </FramedSegment>
-      <FramedSegment
-        title={labels.deleteSegment.title}
-        last
-      >
-        <AppText>{labels.deleteSegment.explainer}</AppText>
-        <DeleteData />
-      </FramedSegment>
-    </ScrollView>
-  )
-}
 
-export default DataManagement
+  constructor(props) {
+    super(props)
+    this.state = { isLoading: false }
+  }
+
+  onStartLoading = () => {
+    this.setState({ isLoading: true })
+  }
+
+  onEndLoading = () => {
+    this.setState({ isLoading: false })
+  }
+
+  onImportData = async (shouldDeleteExistingData) => {
+
+    try {
+      this.onStartLoading()
+      const fileContent = await getFileContent()
+      if (fileContent) {
+        await importData(shouldDeleteExistingData, fileContent)
+      }
+    } catch(err) {
+      return
+    } finally {
+      this.onEndLoading()
+    }
+  }
+
+  render() {
+    return (
+      <View flex={1}>
+        {this.state.isLoading && <AppLoadingView />}
+        {!this.state.isLoading &&
+          <ScrollView>
+            <View>
+              <FramedSegment title={labels.export.button}>
+                <AppText>{labels.export.segmentExplainer}</AppText>
+                <SettingsButton onPress={openShareDialogAndExport}>
+                  {labels.export.button}
+                </SettingsButton>
+              </FramedSegment>
+              <FramedSegment title={labels.import.button}>
+                <AppText>{labels.import.segmentExplainer}</AppText>
+                <SettingsButton
+                  onPress= {() => openImportDialog(this.onImportData)}
+                >
+                  {labels.import.button}
+                </SettingsButton>
+              </FramedSegment>
+              <FramedSegment
+                title={labels.deleteSegment.title}
+                last
+              >
+                <AppText>{labels.deleteSegment.explainer}</AppText>
+                <DeleteData />
+              </FramedSegment>
+            </View>
+          </ScrollView>
+        }
+      </View>
+    )
+  }
+}