Video 12: Add a Loading Indicator While Loading Items with React Native ActivityIndicator.

app.js

@@ -1,5 +1,6 @@
 import React, { Component } from "react";
 import {
+  ActivityIndicator,
   AsyncStorage,
   Keyboard,
   ListView,
@@ -28,6 +29,15 @@ const styles = StyleSheet.create({
   list: {
     backgroundColor: "#fff"
   },
+  loading: {
+    backgroundColor: "rgba(0, 0, 0, 0.2)",
+    bottom: 0,
+    justifyContent: "center",
+    left: 0,
+    position: "absolute",
+    right: 0,
+    top: 0
+  },
   separator: {
     borderWidth: 2,
     borderColor: "#eee"
@@ -54,6 +64,7 @@ class App extends Component {
       dataSource: ds.cloneWithRows([]),
       filter: "ALL",
       items: [],
+      loading: true,
       value: ""
     };
     this.handleAddItem = this.handleAddItem.bind(this);
@@ -69,10 +80,10 @@ class App extends Component {
     AsyncStorage.getItem("items").then((json) => {
       try {
         const items = JSON.parse(json);
-        this.setSource(items, items);
+        this.setSource(items, items, { loading: false });
       }
       catch (e) {
-
+        this.setState({ loading: false });
       }
     });
   }
@@ -168,6 +179,12 @@ class App extends Component {
           onClearComplete={this.handleClearComplete}
           onFilter={this.handleFilter}
         />
+        {this.state.loading && <View style={styles.loading}>
+          <ActivityIndicator
+            animating
+            size="large"
+          />
+        </View>}
       </View>
     );
   }