Skip to content

Commit fe3635b

Browse files
agentmilinduagentmilindu
authored
Merge pull request #42 from TheLukaszNs/develop
Show loading animation, when data fetching is in progress
2 parents b68f4de + 77ab545 commit fe3635b

File tree

11 files changed

+78
-16
lines changed

11 files changed

+78
-16
lines changed

‎android/app/build.gradle

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,8 @@ dependencies {
138138
compile(project(':react-native-firebase')) {
139139
transitive = false
140140
}
141+
compile project(':react-native-spinkit')
142+
141143
compile "com.google.firebase:firebase-core:11.0.0"
142144
compile "com.google.firebase:firebase-analytics:11.0.0"
143145
compile "com.google.firebase:firebase-perf:11.0.0"

‎android/app/src/main/java/org/gdgsrilanka/codelanka/eznet/MainApplication.java

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
import android.util.Log;
55

66
import com.facebook.react.ReactApplication;
7+
import com.react.rnspinkit.RNSpinkitPackage;
78
import com.oblador.vectoricons.VectorIconsPackage;
89
import com.facebook.react.ReactInstanceManager;
910
import com.facebook.react.ReactNativeHost;
@@ -36,6 +37,7 @@ public boolean getUseDeveloperSupport() {
3637
protected List<ReactPackage> getPackages() {
3738
return Arrays.<ReactPackage>asList(
3839
new MainReactPackage(),
40+
new RNSpinkitPackage(),
3941
new RNFirebasePackage(),
4042
new RNFirebaseAnalyticsPackage(),
4143
new RNFirebaseCrashPackage(),

‎android/build.gradle

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ allprojects {
1919
repositories {
2020
mavenLocal()
2121
jcenter()
22+
// Add jitpack repository (added by react-native-spinkit)
23+
maven { url "https://jitpack.io" }
2224
maven {
2325
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
2426
url "$rootDir/../node_modules/react-native/android"

‎android/settings.gradle

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
rootProject.name = 'EZNet'
2+
include ':react-native-spinkit'
3+
project(':react-native-spinkit').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-spinkit/android')
24
include ':react-native-fetch-blob'
35
project(':react-native-fetch-blob').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fetch-blob/android')
46
include ':react-native-vector-icons'

‎ios/EZNet.xcodeproj/project.pbxproj

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@
4949
E36E03D4C0614347BD1FF529 /* Zocial.ttf in Resources */ = {isa = PBXBuildFile; fileRef = C5F2973332314F3090CE044D /* Zocial.ttf */; };
5050
F90355EC5AE4488D8AC3A076 /* libRNFetchBlob.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 0F2D9265AA354DE6B759F93A /* libRNFetchBlob.a */; };
5151
0FCD125FCBB04C22BBC14E4F /* libRNFirebase.a in Frameworks */ = {isa = PBXBuildFile; fileRef = C82810B0F72E44CFBF184C10 /* libRNFirebase.a */; };
52+
AA38DD42A61547279DB2065B /* libRNSpinkit.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 7D9C33604EAF4733B1678344 /* libRNSpinkit.a */; };
5253
/* End PBXBuildFile section */
5354

5455
/* Begin PBXContainerItemProxy section */
@@ -284,6 +285,8 @@
284285
0F2D9265AA354DE6B759F93A /* libRNFetchBlob.a */ = {isa = PBXFileReference; name = "libRNFetchBlob.a"; path = "libRNFetchBlob.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
285286
B6BA648C8AF7429A99A5114F /* RNFirebase.xcodeproj */ = {isa = PBXFileReference; name = "RNFirebase.xcodeproj"; path = "../node_modules/react-native-firebase/ios/RNFirebase.xcodeproj"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = wrapper.pb-project; explicitFileType = undefined; includeInIndex = 0; };
286287
C82810B0F72E44CFBF184C10 /* libRNFirebase.a */ = {isa = PBXFileReference; name = "libRNFirebase.a"; path = "libRNFirebase.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
288+
46590D2B8FCD42468A97733B /* RNSpinkit.xcodeproj */ = {isa = PBXFileReference; name = "RNSpinkit.xcodeproj"; path = "../node_modules/react-native-spinkit/ios/RNSpinkit.xcodeproj"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = wrapper.pb-project; explicitFileType = undefined; includeInIndex = 0; };
289+
7D9C33604EAF4733B1678344 /* libRNSpinkit.a */ = {isa = PBXFileReference; name = "libRNSpinkit.a"; path = "libRNSpinkit.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
287290
/* End PBXFileReference section */
288291

289292
/* Begin PBXFrameworksBuildPhase section */
@@ -312,6 +315,7 @@
312315
139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */,
313316
F90355EC5AE4488D8AC3A076 /* libRNFetchBlob.a in Frameworks */,
314317
0FCD125FCBB04C22BBC14E4F /* libRNFirebase.a in Frameworks */,
318+
AA38DD42A61547279DB2065B /* libRNSpinkit.a in Frameworks */,
315319
);
316320
runOnlyForDeploymentPostprocessing = 0;
317321
};
@@ -480,6 +484,7 @@
480484
139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */,
481485
A8C244E03280488FA985513C /* RNFetchBlob.xcodeproj */,
482486
B6BA648C8AF7429A99A5114F /* RNFirebase.xcodeproj */,
487+
46590D2B8FCD42468A97733B /* RNSpinkit.xcodeproj */,
483488
);
484489
name = Libraries;
485490
sourceTree = "<group>";
@@ -1042,11 +1047,13 @@
10421047
"$(inherited)",
10431048
"\"$(SRCROOT)/$(TARGET_NAME)\"",
10441049
"\"$(SRCROOT)/$(TARGET_NAME)\"",
1050+
"\"$(SRCROOT)/$(TARGET_NAME)\"",
10451051
);
10461052
HEADER_SEARCH_PATHS = (
10471053
"$(inherited)",
10481054
"$(SRCROOT)\..\node_modules\react-native-fetch-blob\ios/**",
10491055
"$(SRCROOT)\..\node_modules\react-native-firebase\ios\RNFirebase/**",
1056+
"$(SRCROOT)\..\node_modules\react-native-spinkit\ios/**",
10501057
);
10511058
};
10521059
name = Debug;
@@ -1069,11 +1076,13 @@
10691076
"$(inherited)",
10701077
"\"$(SRCROOT)/$(TARGET_NAME)\"",
10711078
"\"$(SRCROOT)/$(TARGET_NAME)\"",
1079+
"\"$(SRCROOT)/$(TARGET_NAME)\"",
10721080
);
10731081
HEADER_SEARCH_PATHS = (
10741082
"$(inherited)",
10751083
"$(SRCROOT)\..\node_modules\react-native-fetch-blob\ios/**",
10761084
"$(SRCROOT)\..\node_modules\react-native-firebase\ios\RNFirebase/**",
1085+
"$(SRCROOT)\..\node_modules\react-native-spinkit\ios/**",
10771086
);
10781087
};
10791088
name = Release;
@@ -1097,6 +1106,7 @@
10971106
"$(inherited)",
10981107
"$(SRCROOT)\..\node_modules\react-native-fetch-blob\ios/**",
10991108
"$(SRCROOT)\..\node_modules\react-native-firebase\ios\RNFirebase/**",
1109+
"$(SRCROOT)\..\node_modules\react-native-spinkit\ios/**",
11001110
);
11011111
};
11021112
name = Debug;
@@ -1119,6 +1129,7 @@
11191129
"$(inherited)",
11201130
"$(SRCROOT)\..\node_modules\react-native-fetch-blob\ios/**",
11211131
"$(SRCROOT)\..\node_modules\react-native-firebase\ios\RNFirebase/**",
1132+
"$(SRCROOT)\..\node_modules\react-native-spinkit\ios/**",
11221133
);
11231134
};
11241135
name = Release;
@@ -1150,11 +1161,13 @@
11501161
"$(inherited)",
11511162
"\"$(SRCROOT)/$(TARGET_NAME)\"",
11521163
"\"$(SRCROOT)/$(TARGET_NAME)\"",
1164+
"\"$(SRCROOT)/$(TARGET_NAME)\"",
11531165
);
11541166
HEADER_SEARCH_PATHS = (
11551167
"$(inherited)",
11561168
"$(SRCROOT)\..\node_modules\react-native-fetch-blob\ios/**",
11571169
"$(SRCROOT)\..\node_modules\react-native-firebase\ios\RNFirebase/**",
1170+
"$(SRCROOT)\..\node_modules\react-native-spinkit\ios/**",
11581171
);
11591172
};
11601173
name = Debug;
@@ -1186,11 +1199,13 @@
11861199
"$(inherited)",
11871200
"\"$(SRCROOT)/$(TARGET_NAME)\"",
11881201
"\"$(SRCROOT)/$(TARGET_NAME)\"",
1202+
"\"$(SRCROOT)/$(TARGET_NAME)\"",
11891203
);
11901204
HEADER_SEARCH_PATHS = (
11911205
"$(inherited)",
11921206
"$(SRCROOT)\..\node_modules\react-native-fetch-blob\ios/**",
11931207
"$(SRCROOT)\..\node_modules\react-native-firebase\ios\RNFirebase/**",
1208+
"$(SRCROOT)\..\node_modules\react-native-spinkit\ios/**",
11941209
);
11951210
};
11961211
name = Release;
@@ -1217,6 +1232,7 @@
12171232
"$(inherited)",
12181233
"\"$(SRCROOT)/$(TARGET_NAME)\"",
12191234
"\"$(SRCROOT)/$(TARGET_NAME)\"",
1235+
"\"$(SRCROOT)/$(TARGET_NAME)\"",
12201236
);
12211237
};
12221238
name = Debug;
@@ -1243,6 +1259,7 @@
12431259
"$(inherited)",
12441260
"\"$(SRCROOT)/$(TARGET_NAME)\"",
12451261
"\"$(SRCROOT)/$(TARGET_NAME)\"",
1262+
"\"$(SRCROOT)/$(TARGET_NAME)\"",
12461263
);
12471264
};
12481265
name = Release;

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"test": "jest"
88
},
99
"dependencies": {
10-
"native-base": "^2.2.0",
10+
"native-base": "2.2.0",
1111
"prop-types": "^15.5.10",
1212
"react": "16.0.0-alpha.12",
1313
"react-burger-menu": "^2.1.3",
@@ -17,6 +17,7 @@
1717
"react-native-firebase": "^2.0.2",
1818
"react-native-material-ui": "^1.12.0",
1919
"react-native-responsive-image": "^2.1.0",
20+
"react-native-spinkit": "^1.1.1",
2021
"react-navigation": "^1.0.0-beta.11",
2122
"react-redux": "^5.0.5",
2223
"redux": "^3.7.1",

‎src/actions/index.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
import { FETCH_DATA } from './types';
1+
import { FETCHED_DATA, START_FETCHING } from './types';
22

33
import Api from '../api/Api';
44

55
export const actionFetchData = () => (dispatch) => {
6+
dispatch({ type: START_FETCHING });
67
Api.getCombinedData(Api.getCategories, Api.getSites, Api.getThumbnail)
78
.then((data) => {
89
dispatch({
9-
type: FETCH_DATA,
10+
type: FETCHED_DATA,
1011
payload: data,
1112
});
1213
});

‎src/actions/types.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
export const FETCH_DATA = 'fetch_data';
1+
export const FETCHED_DATA = 'fetched_data';
2+
export const START_FETCHING = 'start_fetching';

‎src/components/App.js

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { Container, Content } from 'native-base';
77
import PropTypes from 'prop-types';
88
import { connect } from 'react-redux';
99

10+
import Loading from './Loading';
1011
import TwoColumnView from './common/TwoColumnView';
1112
import BoxItem from './common/BoxItem';
1213

@@ -15,13 +16,15 @@ import * as actions from './../actions';
1516
const styles = StyleSheet.create({
1617
container: {
1718
flex: 1,
19+
alignItems: 'center',
1820
},
1921
});
2022

2123
class Categories extends Component {
2224
static propTypes = {
2325
actionFetchData: PropTypes.func.isRequired,
24-
categoryData: PropTypes.array.isRequired,
26+
categories: PropTypes.array.isRequired,
27+
isFetching: PropTypes.bool.isRequired,
2528
navigation: PropTypes.object.isRequired,
2629
};
2730

@@ -34,10 +37,10 @@ class Categories extends Component {
3437
}
3538

3639
renderCategories() {
40+
const { categories } = this.props;
3741
const { navigate } = this.props.navigation;
3842

39-
let nodes = null;
40-
nodes = this.props.categoryData.map(category => (
43+
const nodes = categories.map(category => (
4144
<BoxItem
4245
key={category.id}
4346
onPress={() => navigate('Detail', { title: category.title, items: category.items })}
@@ -53,20 +56,22 @@ class Categories extends Component {
5356
}
5457

5558
render() {
59+
const { isFetching } = this.props;
5660
return (
5761
<Container>
5862
<Content>
5963
<View style={styles.container}>
60-
{this.renderCategories()}
64+
{ isFetching ? <Loading /> : this.renderCategories() }
6165
</View>
6266
</Content>
6367
</Container>
6468
);
6569
}
6670
}
6771

68-
const mapStateToProps = ({ data }) => ({
69-
categoryData: data,
72+
const mapStateToProps = ({ data: { categories, isFetching } }) => ({
73+
categories,
74+
isFetching,
7075
});
7176

7277
export default connect(mapStateToProps, actions)(Categories);

‎src/components/Loading.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react';
2+
3+
import Spinner from 'react-native-spinkit';
4+
5+
const loaderStyle = {
6+
type: 'FoldingCube',
7+
color: '#3F51B5',
8+
size: 100,
9+
}
10+
11+
const Loading = () => (
12+
<Spinner
13+
type={loaderStyle.type}
14+
color={loaderStyle.color}
15+
size={loaderStyle.size}
16+
style={{ marginTop: '50%' }}
17+
/>
18+
);
19+
20+
export default Loading;

0 commit comments

Comments
 (0)