add loader for file view screen

Author: Arjun-sna

src/gists/screens/components/LoadingView.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { StyleSheet, View, ActivityIndicator, Text } from 'react-native';
+
+import { colors } from '../../../config';
+
+type Props = {
+  animating: boolean,
+  text: string,
+  center: boolean,
+};
+
+const styles = StyleSheet.create({
+  loadingContainer: {
+    backgroundColor: colors.white,
+    flex: 1,
+    alignItems: 'center',
+  },
+  center: {
+    justifyContent: 'center',
+  },
+  text: {
+    paddingTop: 20,
+  },
+});
+
+export default ({ animating, text, center }: Props) => (
+  <View style={[styles.loadingContainer, center && styles.center]}>
+    <ActivityIndicator animating={animating} size="large" />
+    {text && <Text style={styles.text}>{text}</Text>}
+  </View>
+);

src/gists/screens/components/Toolbar.js

@@ -20,7 +20,7 @@ const Title = styled.Text`
 export default (props) => {
 	let toolbarContent;
 	if (typeof props.toolbarContent === 'string') {
-		toolbarContent = <Title>{props.toolbarContent}</Title>
+		toolbarContent = <Title numberOfLines={1}>{props.toolbarContent}</Title>
 	} else if (typeof props.toolbarContent === 'function') {
 		toolbarContent = props.toolbarContent();
 	} else {

src/gists/screens/gistfilecontent.screen.js

@@ -1,15 +1,19 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Text, ScrollView } from 'react-native';
+import { Text, ScrollView, View } from 'react-native';
 import axios from 'axios';
 import { connect } from 'react-redux';
+import isEmpty from 'lodash/isEmpty';
 import SyntaxHighlighter from 'react-native-syntax-highlighter';
 import { github as GithubStyle } from 'react-syntax-highlighter/dist/styles/hljs';
 import Toolbar from './components/Toolbar';
-import { normalizeFont } from '../../config';
+import { normalizeFont, colors } from '../../config';
 import { fetchFileContent } from './../../api';
+import LoadingView from './components/LoadingView';
 
 const Container = styled.View`
+	flex: 1;
+	background: #FFFFFF;
 	padding-top: 20px;
 `;
 
@@ -20,6 +24,25 @@ const syntaxHighlighterStyle = {
   },
 };
 
+const CodeContainer = styled.View`
+	flex: 1;
+	padding-vertical: 10;
+	padding-horizontal: 10;
+	margin-bottom: 10;
+`
+
+const ErrorContainer = styled.View`
+	flex: 1;
+	align-items: center;
+	justify-content: center;
+`;
+
+const ErrorText = styled.Text`
+	text-align: center;
+	color: ${colors.greyDark};
+	font-size: ${normalizeFont(14)};
+`
+
 class GistFileScreen extends React.Component {
 	constructor(props) {
 		super(props);
@@ -33,6 +56,7 @@ class GistFileScreen extends React.Component {
 	componentDidMount() {
 		this.setState({
 			isLoading: true,
+			error: ''
 		})
 
 		const { navigation, accessToken } = this.props;
@@ -42,7 +66,7 @@ class GistFileScreen extends React.Component {
 			.then(response => {
 				this.fileContent = response;
 				this.setState({
-					isLoading: true,
+					isLoading: false,
 				});
 			})
 			.catch(err => {
@@ -57,24 +81,35 @@ class GistFileScreen extends React.Component {
 		const { navigation } = this.props;
 		const fileName = navigation.state.params.fileData.filename;
 		const fileType = fileName.split('.').pop();
+		const { isLoading, error } = this.state;
 
 		return(
 			<Container>
 				<Toolbar 
 					toolbarContent={fileName}
 					onBackPress={() => navigation.goBack()} 
 					/>
-				<ScrollView>
-					<SyntaxHighlighter
-						language={fileType}
-						CodeTag={Text}
-						codeTagProps={{ style: {paddingRight: 15, paddingBottom: 0}}}
-						style={syntaxHighlighterStyle}
-						fontSize={normalizeFont(12)}
-					>
-						{this.fileContent}
-					</SyntaxHighlighter>
-				</ScrollView>
+				{ isLoading && <LoadingView animating={true} center />}
+				{ !isLoading && !isEmpty(error) && 
+					<ErrorContainer>
+						<ErrorText>{error}</ErrorText>
+					</ErrorContainer>
+				}
+				{ !isLoading && !error &&
+					<ScrollView>
+						<CodeContainer>
+							<SyntaxHighlighter
+								language={fileType}
+								CodeTag={Text}
+								codeTagProps={{ style: {paddingRight: 15, paddingBottom: 0}}}
+								style={syntaxHighlighterStyle}
+								fontSize={normalizeFont(12)}
+							>
+								{this.fileContent}
+							</SyntaxHighlighter>
+						</CodeContainer>
+					</ScrollView>
+			}
 			</Container>
 		)
 	}