LoadingSpinner: add workaround for Surface issue

facebook/react-native#17565

src/ui/generic/loadingSpinner.tsx

@@ -4,8 +4,6 @@ import { StyleSheet } from 'react-native'
 import { JolocomTheme } from 'src/styles/jolocom-theme'
 const loaders = require('react-native-indicator')
 
-interface Props {}
-
 const styles = StyleSheet.create({
   loadingContainer: {
     backgroundColor: 'white',
@@ -16,12 +14,28 @@ const styles = StyleSheet.create({
   },
 })
 
-export const LoadingSpinner: React.SFC<Props> = props => (
-  <Container style={styles.loadingContainer}>
-    <loaders.RippleLoader
-      size={120}
-      strokeWidth={4}
-      color={JolocomTheme.primaryColorPurple}
-    />
-  </Container>
-)
+export class LoadingSpinner extends React.PureComponent {
+  componentDidMount() {
+    // FIXME
+    // HACK because of https://github.com/facebook/react-native/issues/17565
+    // the fix will land in RN 0.61
+    // then we can get rid of this
+    requestAnimationFrame(() => this.forceUpdate())
+    // it is actually not even always reproducible :/
+  }
+
+  render() {
+    // FIXME the key={Date.now()} bit is part of the HACK from above,
+    // see componentDidMount
+    return (
+      <Container style={styles.loadingContainer}>
+        <loaders.RippleLoader
+          key={Date.now()}
+          size={120}
+          strokeWidth={4}
+          color={JolocomTheme.primaryColorPurple}
+        />
+      </Container>
+    )
+  }
+}