diff --git a/src/components/loading-indicators/loading-list-item.component.js b/src/components/loading-indicators/loading-list-item.component.js
index b0601c91c..fcda877ce 100644
--- a/src/components/loading-indicators/loading-list-item.component.js
+++ b/src/components/loading-indicators/loading-list-item.component.js
@@ -1,55 +1,35 @@
-import React, { Component } from 'react';
-import { StyleSheet, Animated, View } from 'react-native';
+import React from 'react';
+import { Animated } from 'react-native';
+import styled from 'styled-components';
 
 import { colors } from 'config';
-import { loadingAnimation } from 'utils';
+import { FadeAnimationProps, withFadeAnimation } from 'utils';
 
-const styles = StyleSheet.create({
-  container: {
-    paddingTop: 10,
-    paddingRight: 10,
-    paddingBottom: 10,
-    borderBottomColor: '#ededed',
-    borderBottomWidth: 1,
-    backgroundColor: 'transparent',
-  },
-  wrapper: {
-    flexDirection: 'row',
-    marginLeft: 10,
-    height: 34,
-    alignItems: 'center',
-  },
-  textBar: {
-    paddingLeft: 34,
-    height: 7,
-    width: 150,
-    backgroundColor: colors.greyDark,
-  },
-});
+const Container = styled.View`
+  padding: 10px;
+  border-bottom-width: 1;
+  border-bottom-color: #ededed;
+  background-color: transparent;
+`;
 
-export class LoadingListItem extends Component {
-  constructor() {
-    super();
-    this.state = {
-      fadeAnimValue: new Animated.Value(0),
-    };
-  }
+const Wrapper = styled.View`
+  flex-direction: row;
+  align-items: center;
+  height: 34;
+`;
 
-  componentDidMount() {
-    loadingAnimation(this.state.fadeAnimValue).start();
-  }
+const TextBar = styled(Animated.View)`
+  height: 7;
+  width: 150;
+  background-color: ${colors.greyDark};
+`;
 
-  render() {
-    return (
-      <View style={styles.container}>
-        <View style={styles.wrapper}>
-          <Animated.View style={{ opacity: this.state.fadeAnimValue }} />
+const LoadingListItemComponent = ({ opacity }: FadeAnimationProps) => (
+  <Container>
+    <Wrapper>
+      <TextBar style={{ opacity }} />
+    </Wrapper>
+  </Container>
+);
 
-          <Animated.View
-            style={[styles.textBar, { opacity: this.state.fadeAnimValue }]}
-          />
-        </View>
-      </View>
-    );
-  }
-}
+export const LoadingListItem = withFadeAnimation(LoadingListItemComponent);