style: 💄 added Loading in Home Page

src/common/components/animations/Loading.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import Lottie from 'react-lottie';
+import PropTypes from 'prop-types';
+
+import * as loadingLottie from '../../../loading.json';
+import * as doneLottie from '../../../done.json';
+
+const loadingAnimation = {
+  loop: true,
+  autoplay: true,
+  animationData: loadingLottie.default,
+  rendererSettings: {
+    preserveAspectRatio: 'xMidYMid slice',
+  },
+};
+
+const doneAnimation = {
+  loop: false,
+  autoplay: true,
+  animationData: doneLottie.default,
+  rendererSettings: {
+    preserveAspectRatio: 'xMidYMid slice',
+  },
+};
+
+export default function Loading({ loading }) {
+  return (
+    <div className="bgLoading">
+      {!loading ? (
+        <Lottie
+          options={loadingAnimation}
+          height={420}
+          width={420}
+        />
+      ) : (
+        <Lottie
+          options={doneAnimation}
+          height={220}
+          width={220}
+        />
+      )}
+    </div>
+  );
+}
+
+Loading.propTypes = {
+  loading: PropTypes.bool,
+};
+
+Loading.defaultProps = {
+  loading: undefined,
+};

src/common/pages/Home.jsx

@@ -23,17 +23,18 @@ import img3 from '../../files/images/img3.png';
 import img4 from '../../files/images/img4.png';
 import img6 from '../../files/images/img6.png';
 import {
-  OPEN_FILTER_MENU, setHighFilter, setLowFilter,
+  OPEN_FILTER_MENU, setDoneLoading, setFetchOnDone, setHighFilter, setLowFilter,
   setMsgLogInOK, setShipFilter,
 } from '../../redux/actions';
+import Loading from '../components/animations/Loading';
 
 export default function Home() {
   const dispatch = useDispatch();
   const [ScrollY, setScrollY] = useState(false);
   const {
     user: { msgLoginOK },
     screen: {
-      lightTheme, openFilter, highFilter, lowFilter, shipFilter,
+      fetchOn, loading, done, lightTheme, openFilter, highFilter, lowFilter, shipFilter,
     },
   } = useSelector((state) => state);
 
@@ -154,12 +155,26 @@ export default function Home() {
     </div>
   );
 
+  const getLoading = () => {
+    const LOADING_TIME = 3000;
+    const DONE_TIME = 2000;
+
+    setTimeout(() => {
+      dispatch(setDoneLoading(undefined, true));
+      setTimeout(() => {
+        dispatch(setDoneLoading(true));
+      }, DONE_TIME);
+    }, LOADING_TIME);
+    dispatch(setFetchOnDone(false, undefined));
+  };
+
   // ---------------------------------------------------------------------------------------------
   // CICLOS DE VIDA
   useEffect(() => { Aos.init({ duration: 2000 }); }, []);
+  useEffect(() => { if (fetchOn) getLoading(); });
 
   // ---------------------------------------------------------------------------------------------
-
+  if (!done && fetchOn === false) { return (<Loading loading={loading} />); }
   return (
     <div>
       {/* <!--========== SCROLL TOP ==========--> */}

src/common/pages/Profile.jsx

@@ -7,7 +7,7 @@ import { FaFacebookF, FaTwitter, FaGoogle } from 'react-icons/fa';
 import { MdError } from 'react-icons/md';
 
 import {
-  addLogin, setMsgLoginError, setMsgLogInOK, setSignUp,
+  addLogin, setFetchOnDone, setMsgLoginError, setMsgLogInOK, setSignUp,
 } from '../../redux/actions';
 import { AddToUsers } from '../../functions';
 
@@ -59,10 +59,11 @@ export default function Profile() {
   };
 
   const closeMsgLoginOK = () => {
-    dispatch(setMsgLogInOK(true, true));
-
     setTimeout(() => {
-      dispatch(setMsgLogInOK(true, false));
+      dispatch(setMsgLogInOK(true, true));
+      setTimeout(() => {
+        dispatch(setMsgLogInOK(true, false));
+      }, TIME_SEC);
     }, TIME_SEC);
   };
 
@@ -91,6 +92,7 @@ export default function Profile() {
     if (atualUser.length) {
       if (Lemail === atualUser[0].email && Lpassword === atualUser[0].password) {
         dispatch(addLogin(AddToUsers(false, users, Lemail)));
+        dispatch(setFetchOnDone(true, undefined));
         closeMsgLoginOK();
         setDisabledBtn(true);
         history.push('/');

src/redux/reducers/screen.js

@@ -6,7 +6,7 @@ import {
 } from '../actions';
 
 export const SCREEN = {
-  fetchOn: true,
+  fetchOn: null,
   loading: undefined,
   done: undefined,
   home: true,