Show loading animation, when data fetching is in progress

[TheLukaszNs]

Fast Summary

This PR fixes #40 (at least loading indicator will be now shown), and adds Spinkit:

• react-native-spinkit

[tdevinda]

The concept seems lucrative. But the content is the problem for me.
This animation has UI issues.

1. Colors have been added which clash with both the theme and the target audience.
2. The wording 'Firebase' should never be inserted here. It is a technical term. The app is targetted for rural low tech savvy users.

Shall we do these changes and retry?

Thanks for your enthusiasm, its a really valuable feature.

[nushydude]

React Native Spinkit should have been used. It's pretty smooth and customisable.

[TheLukaszNs]

@nushydude react-native-spinkit is used as you commented on #40
@tdevinda we can always change hardcoded string or numbers to classes or something, but I don't see 'firebase' here - it only shows loading indicator in the centre of screen.

[nushydude]

Create a new action type FETCHING_DATA and dispatch it with no payload (i.e. dispatch({ type: FETCHING_DATA }))

Better keep the shape of all actions to only have a type and a payload (& meta if required).

[nushydude]

Perhaps we should rename this action type to FETCHED_DATA .

[nushydude]

initial state should be

{ isFetching: false, categories: [] }

[nushydude]

I would personally move the loader out of the renderCategories and move into render() function,

Something like

{ isFetching && <Loading /> }
{ !isFetching && this.renderCategories() } 

You can define a functional component called Loading like this and just use it as above.

const Loading = () => <Spinner
          type="FoldingCube"
           color="#3F51B5"
           size={100}
           style={{ marginTop: '50%' }}
         />;

If you'd like to keep the code even cleaner, create a new component called Categories (a different file) and just use and move the rendering logic into its render method.

You can extract and expose the required props from mapStateToProps. Would make things look cleaner.

const mapStateToProps = ({ data: { categories, isFetching }) => ({
  categories,
  isFetching,
});

[TheLukaszNs]

@nushydude check it now, maybe there is something more I can fix?

[nushydude]

1. No need to set categories to []
2. See if you can get object spread operator to work. It would be cleaner if we could just user

return { ...state, categories: [], isFeching: true } 

for example, instead of Object.assign which is old school.

[nushydude]

If you are using the loaderStyle object, you should be able to use

<Spinner {...loaderStyle} style={{ marginTop: '50%' }} />

I would define style as an object, but define the options as consts.

import { Stylesheet } from 'react-native';

const TYPE = 'FolderingCube';
const COLOR = '#3F51B5';
const SIZE = 100;

const styles = Stylesheet.create({
  loader: { marginTop: '50%' },
}};

const Loading = () => (
  <Spinner
     type={TYPE}
     color={COLOR}
     size={SIZE}
     style={styles.loader}
   />
 );

[nushydude]

I've left some comments. You can give it a shot if you are up for it. I will just approve the changes for now.