Updated loading states

Author: G2Jose

src/comments/comment.loading.ui.js

@@ -1,22 +1,54 @@
 import React from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View, StyleSheet, Animated, Easing } from 'react-native';
 
 import Separator from 'common/components/separator';
 import { colors } from 'common/constants';
 
-export default () => (
-  <View style={styles.container}>
-    <View style={styles.loadingComment} />
-    <View style={styles.loadingComment} />
-    <View style={styles.metaRow}>
-      <View style={styles.metaTextLoadingShort} />
-      <Separator />
-      <View style={styles.metaTextLoading} />
-      <Separator />
-      <View style={styles.metaTextLoading} />
-    </View>
-  </View>
-);
+class CommentLoading extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { fadeAnim: new Animated.Value(0.5) };
+  }
+
+  componentDidMount() {
+    this.animateLoading();
+  }
+
+  animateLoading() {
+    Animated.timing(this.state.fadeAnim, {
+      toValue: 1,
+      duration: 1500,
+      easing: Easing.back(),
+    }).start(() => {
+      this.setState({ fadeAnim: new Animated.Value(0.5) }, () =>
+        this.animateLoading()
+      );
+    });
+  }
+
+  render() {
+    const { fadeAnim } = this.state;
+    return (
+      <View style={styles.container}>
+        <Animated.View style={[styles.loadingComment, { opacity: fadeAnim }]} />
+        <Animated.View style={[styles.loadingComment, { opacity: fadeAnim }]} />
+        <View style={styles.metaRow}>
+          <Animated.View
+            style={[styles.metaTextLoadingShort, { opacity: fadeAnim }]}
+          />
+          <Separator />
+          <Animated.View
+            style={[styles.metaTextLoading, { opacity: fadeAnim }]}
+          />
+          <Separator />
+          <Animated.View
+            style={[styles.metaTextLoading, { opacity: fadeAnim }]}
+          />
+        </View>
+      </View>
+    );
+  }
+}
 
 const styles = StyleSheet.create({
   container: {
@@ -49,3 +81,5 @@ const styles = StyleSheet.create({
     marginBottom: 3,
   },
 });
+
+export default CommentLoading;

src/common/components/headline.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
-import Separator from 'common/components/separator';
 
+import Separator from 'common/components/separator';
+import HeadlineLoading from 'common/components/headline.loading.ui';
 import { colors } from 'common/constants';
 
 const Headline = ({ _loading, title, by, score, descendants, type }) => {
@@ -25,19 +26,7 @@ const Headline = ({ _loading, title, by, score, descendants, type }) => {
       </View>
     );
   }
-  return (
-    <View style={styles.container}>
-      <View style={styles.loadingTitle} />
-      <View style={styles.loadingTitle} />
-      <View style={styles.metaRow}>
-        <View style={styles.metaTextLoading} />
-        <Separator />
-        <View style={styles.metaTextLoading} />
-        <Separator />
-        <View style={styles.metaTextLoading} />
-      </View>
-    </View>
-  );
+  return <HeadlineLoading />;
 };
 
 const styles = StyleSheet.create({
@@ -57,24 +46,13 @@ const styles = StyleSheet.create({
     fontSize: 17,
     fontWeight: 'bold',
   },
-  loadingTitle: {
-    backgroundColor: colors.loadingTextPlaceholder,
-    height: 17,
-    marginTop: 3,
-    marginBottom: 3,
-  },
   metaRow: {
     flex: 0,
     flexDirection: 'row',
   },
   metaText: {
     color: 'grey',
   },
-  metaTextLoading: {
-    backgroundColor: '#999999',
-    height: 17,
-    width: 75,
-  },
 });
 
 export default Headline;

src/common/components/headline.loading.ui.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import { View, StyleSheet, Animated, Easing } from 'react-native';
+import Separator from 'common/components/separator';
+
+import { colors } from 'common/constants';
+
+class HeadlineLoading extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { fadeAnim: new Animated.Value(0.5) };
+  }
+  animateLoading() {
+    Animated.timing(this.state.fadeAnim, {
+      toValue: 1,
+      duration: 1500,
+      easing: Easing.back(),
+    }).start(() => {
+      this.setState({ fadeAnim: new Animated.Value(0.5) }, () =>
+        this.animateLoading()
+      );
+    });
+  }
+  render() {
+    const { fadeAnim } = this.state;
+    return (
+      <View style={styles.container}>
+        <Animated.View style={[styles.loadingTitle, { opacity: fadeAnim }]} />
+        <Animated.View style={[styles.loadingTitle, { opacity: fadeAnim }]} />
+        <View style={styles.metaRow}>
+          <Animated.View
+            style={[styles.metaTextLoading, { opacity: fadeAnim }]}
+          />
+          <Separator />
+          <Animated.View
+            style={[styles.metaTextLoading, { opacity: fadeAnim }]}
+          />
+          <Separator />
+          <Animated.View
+            style={[styles.metaTextLoading, { opacity: fadeAnim }]}
+          />
+        </View>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingTop: 10,
+    paddingBottom: 10,
+    borderWidth: 0,
+    borderColor: '#d6d7da',
+    borderBottomWidth: 0.5,
+  },
+  loadingTitle: {
+    backgroundColor: colors.loadingTextPlaceholder,
+    height: 17,
+    marginTop: 3,
+    marginBottom: 3,
+  },
+  metaRow: {
+    flex: 0,
+    flexDirection: 'row',
+  },
+  metaTextLoading: {
+    backgroundColor: '#999999',
+    height: 17,
+    width: 75,
+  },
+});
+
+export default HeadlineLoading;