Placeholder loading animation added

Author: gabriel-hahn

__tests__/components/ProductsList.spec.js

@@ -32,6 +32,7 @@ const INITIAL_STATE = {
         price: 125.36,
       },
     ],
+    loading: false,
   },
   categories: {
     currentId: 3,
@@ -41,6 +42,7 @@ const INITIAL_STATE = {
 const STATE_WITHOUT_ITEMS = {
   products: {
     items: [],
+    loading: false,
   },
   categories: {
     currentId: 3,

package.json

@@ -22,6 +22,7 @@
     "redux": "^4.0.1",
     "redux-saga": "^1.0.2",
     "reduxsauce": "^1.1.0",
+    "rn-placeholder": "^2.0.0",
     "seamless-immutable": "^7.1.4",
     "styled-components": "^4.2.1"
   },
@@ -59,6 +60,9 @@
       "!src/store/ducks/index.js",
       "src/store/sagas/*.js",
       "!src/store/sagas/index.js"
+    ],
+    "transformIgnorePatterns": [
+      "node_modules/(?!(jest-)?react-native|rn-placeholder)"
     ]
   },
   "engines": {

src/components/PlaceholderLoading/index.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import Placeholder, { Media } from 'rn-placeholder';
+
+import { PlaceholderView } from './styles';
+
+const PlaceholderLoading = loading => (
+  <Placeholder isReady={!loading} animation="fade">
+    <PlaceholderView>
+      <Media size={160} margin={13} />
+      <Media size={160} margin={13} />
+      <Media size={160} margin={13} />
+      <Media size={160} margin={13} />
+      <Media size={160} margin={13} />
+      <Media size={160} margin={13} />
+    </PlaceholderView>
+  </Placeholder>
+);
+
+export default PlaceholderLoading;

src/components/PlaceholderLoading/styles.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components/native';
+
+export const PlaceholderView = styled.View`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-content: space-between;
+`;

src/components/ProductsList/index.js

@@ -4,6 +4,8 @@ import { connect } from 'react-redux';
 import { withNavigation } from 'react-navigation';
 import PropTypes from 'prop-types';
 
+import PlaceholderLoading from '~/components/PlaceholderLoading';
+
 import ProductsActions from '~/store/ducks/products';
 
 import {
@@ -53,9 +55,11 @@ class ProductList extends Component {
   };
 
   render() {
-    const { items } = this.props;
+    const { items, loading } = this.props;
 
-    return (
+    return loading ? (
+      <PlaceholderLoading loading={loading} />
+    ) : (
       <Container>
         <ProductsList
           data={items}
@@ -78,6 +82,7 @@ class ProductList extends Component {
 
 const mapStateToProps = state => ({
   items: state.products.items,
+  loading: state.products.loading,
   categoryId: state.categories.currentId,
 });
 

src/store/ducks/products.js

@@ -11,8 +11,10 @@ export default Creators;
 
 const INITIAL_STATE = Immutable({
   items: [],
+  loading: false,
 });
 
 export const reducer = createReducer(INITIAL_STATE, {
-  [Types.LOAD_PRODUCTS_SUCCESS]: (state, { items }) => ({ items }),
+  [Types.LOAD_PRODUCTS_REQUEST]: state => ({ ...state, loading: true }),
+  [Types.LOAD_PRODUCTS_SUCCESS]: (state, { items }) => ({ ...state, items, loading: false }),
 });

yarn.lock

@@ -5762,6 +5762,14 @@ prop-types-exact@^1.2.0:
     object.assign "^4.1.0"
     reflect.ownkeys "^0.2.0"
 
+[email protected]:
+  version "15.6.2"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
+  integrity sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==
+  dependencies:
+    loose-envify "^1.3.1"
+    object-assign "^4.1.1"
+
 prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
@@ -6435,6 +6443,13 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/rn-host-detect/-/rn-host-detect-1.1.5.tgz#fbecb982b73932f34529e97932b9a63e58d8deb6"
   integrity sha512-ufk2dFT3QeP9HyZ/xTuMtW27KnFy815CYitJMqQm+pgG3ZAtHBsrU8nXizNKkqXGy3bQmhEoloVbrfbvMJMqkg==
 
+rn-placeholder@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/rn-placeholder/-/rn-placeholder-2.0.0.tgz#8d72a432e9a6b02f0b3cb7de8ddf22b200b80ffd"
+  integrity sha512-bVy0GYu3LrxR0o/fGo09YN3a4OR13f6/Y1HFZ0s9f/ejUZWU2E1cvmNuPmPvEyjRQATa8NQcwNhB0CvXFJhbSg==
+  dependencies:
+    prop-types "15.6.2"
+
 rst-selector-parser@^2.2.3:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/rst-selector-parser/-/rst-selector-parser-2.2.3.tgz#81b230ea2fcc6066c89e3472de794285d9b03d91"