From df28e0de95e29b0ad3aed16c7b5ad39943cc01a7 Mon Sep 17 00:00:00 2001
From: Jonathan Poltak Samosir <jonathan.samosir@gmail.com>
Date: Fri, 27 Sep 2019 13:43:13 +1000
Subject: [PATCH] Set up proper loading screen rather than text

- just re-used the loading balls, centered vertically and horizontally
- also set use of the native driver to put the animations on the UI thread rather than main JS loop:
http://facebook.github.io/react-native/blog/2017/02/14/using-native-driver-for-animated
---
 .../onboarding/ui/components/welcome.styles.ts  |  1 +
 app/src/ui/components/loading-balls.tsx         |  3 +++
 app/src/ui/components/loading-screen.styles.ts  |  9 +++++++++
 app/src/ui/components/loading-screen.tsx        | 15 +++++++++++++++
 app/src/ui/index.tsx                            | 17 +++++++----------
 5 files changed, 35 insertions(+), 10 deletions(-)
 create mode 100644 app/src/ui/components/loading-screen.styles.ts
 create mode 100644 app/src/ui/components/loading-screen.tsx

diff --git a/app/src/features/onboarding/ui/components/welcome.styles.ts b/app/src/features/onboarding/ui/components/welcome.styles.ts
index 753539116..694888176 100644
--- a/app/src/features/onboarding/ui/components/welcome.styles.ts
+++ b/app/src/features/onboarding/ui/components/welcome.styles.ts
@@ -14,5 +14,6 @@ export default StyleSheet.create({
     btn: {
         position: 'absolute',
         bottom: 35,
+        height: 50,
     },
 })
diff --git a/app/src/ui/components/loading-balls.tsx b/app/src/ui/components/loading-balls.tsx
index f70fc36e4..f3d6df947 100644
--- a/app/src/ui/components/loading-balls.tsx
+++ b/app/src/ui/components/loading-balls.tsx
@@ -30,14 +30,17 @@ class LoadingBalls extends React.PureComponent<Props, State> {
                 Animated.timing(this.state.leftOffset, {
                     toValue: LoadingBalls.FINAL_SPACING,
                     duration: LoadingBalls.DURATION,
+                    useNativeDriver: true,
                 }),
                 Animated.timing(this.state.sizeInc, {
                     toValue: LoadingBalls.FINAL_SIZE,
                     duration: LoadingBalls.DURATION,
+                    useNativeDriver: true,
                 }),
                 Animated.timing(this.state.sizeDec, {
                     toValue: LoadingBalls.INIT_SIZE,
                     duration: LoadingBalls.DURATION,
+                    useNativeDriver: true,
                 }),
             ]),
         ).start()
diff --git a/app/src/ui/components/loading-screen.styles.ts b/app/src/ui/components/loading-screen.styles.ts
new file mode 100644
index 000000000..f92f2fdc7
--- /dev/null
+++ b/app/src/ui/components/loading-screen.styles.ts
@@ -0,0 +1,9 @@
+import { StyleSheet } from 'react-native'
+
+export default StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+})
diff --git a/app/src/ui/components/loading-screen.tsx b/app/src/ui/components/loading-screen.tsx
new file mode 100644
index 000000000..7ea61d3c3
--- /dev/null
+++ b/app/src/ui/components/loading-screen.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import { View } from 'react-native'
+
+import LoadingBalls from './loading-balls'
+import styles from './loading-screen.styles'
+
+export default class LoadingScreen extends React.PureComponent {
+    render() {
+        return (
+            <View style={styles.container}>
+                <LoadingBalls />
+            </View>
+        )
+    }
+}
diff --git a/app/src/ui/index.tsx b/app/src/ui/index.tsx
index 81f669d22..46c937df0 100644
--- a/app/src/ui/index.tsx
+++ b/app/src/ui/index.tsx
@@ -4,6 +4,7 @@ import { AppRegistry, View, Text } from 'react-native'
 import { name as appName } from '../../app.json'
 import { createApp, createShareUI } from './navigation'
 import { UIDependencies } from './types'
+import LoadingScreen from './components/loading-screen'
 
 export class UI {
     private setupResolve!: (dependencies: UIDependencies) => void
@@ -27,17 +28,17 @@ export class UI {
                 this.setState(() => ({ dependencies }))
             }
 
+            protected renderLoading() {
+                return <LoadingScreen />
+            }
+
             abstract render(): JSX.Element
         }
 
         class AppContainer extends AbstractContainer {
             render() {
                 if (!this.state.dependencies) {
-                    return (
-                        <View>
-                            <Text>Loading!?!!</Text>
-                        </View>
-                    )
+                    return this.renderLoading()
                 }
 
                 const AppContainer = createApp(this.state.dependencies)
@@ -48,11 +49,7 @@ export class UI {
         class ShareContainer extends AbstractContainer {
             render() {
                 if (!this.state.dependencies) {
-                    return (
-                        <View>
-                            <Text>Loading!?!!</Text>
-                        </View>
-                    )
+                    return this.renderLoading()
                 }
 
                 const AppContainer = createShareUI(this.state.dependencies)