From 3944281debff0acfb6839386ece7f3d2b26ae388 Mon Sep 17 00:00:00 2001 From: mfikria Date: Thu, 25 Nov 2021 16:44:51 +0700 Subject: [PATCH 1/2] Add loading indicator --- .../ChallengeLoading/index.jsx | 19 +++++ .../ChallengeLoading/styles.module.scss | 84 +++++++++++++++++++ src/containers/Challenges/Listing/index.jsx | 9 +- src/containers/Challenges/index.jsx | 16 +++- src/reducers/challenges.js | 6 +- 5 files changed, 127 insertions(+), 7 deletions(-) create mode 100644 src/components/challenge-listing/ChallengeLoading/index.jsx create mode 100644 src/components/challenge-listing/ChallengeLoading/styles.module.scss diff --git a/src/components/challenge-listing/ChallengeLoading/index.jsx b/src/components/challenge-listing/ChallengeLoading/index.jsx new file mode 100644 index 0000000..42ac1e2 --- /dev/null +++ b/src/components/challenge-listing/ChallengeLoading/index.jsx @@ -0,0 +1,19 @@ +import React from "react"; +import "./styles.module.scss"; + +export default function ChallengeLoading() { + return ( +
+
+
+
+
+
+
+
+
+
+
+
+ ) +} diff --git a/src/components/challenge-listing/ChallengeLoading/styles.module.scss b/src/components/challenge-listing/ChallengeLoading/styles.module.scss new file mode 100644 index 0000000..7599b17 --- /dev/null +++ b/src/components/challenge-listing/ChallengeLoading/styles.module.scss @@ -0,0 +1,84 @@ +@import "~styles/mixins"; + +@keyframes placeholderAnim { + 0% { + background-position: -$base-unit * 94 0; + } + + 100% { + background-position: $base-unit * 94 0; + } +} + +.animated-placeholder-template { + animation-duration: 1.25s; + animation-fill-mode: forwards; + animation-iteration-count: infinite; + animation-name: placeholderAnim; + animation-timing-function: linear; + background: $tc-gray-neutral-dark; + background: linear-gradient(to right, $tc-gray-neutral-dark 8%, $tc-gray-10 18%, $tc-gray-neutral-dark 33%); + background-size: $base-unit * 256 $base-unit * 20; + position: relative; +} + +.placeholder-template { + border-radius: $corner-radius; + + @extend .animated-placeholder-template; +} + +.challenge-loading { + height: 126px; + padding: 16px; + margin: 0 16px; + display: flex; + border-bottom: 1px solid #E9E9E9; + border-top: 1px solid #E9E9E9; + + > div { + margin-right: 16px; + } + + &:nth-child(even) { + background: #FBFBFB; + } + .track { + flex: 1 0 46px; + width: 46px; + height: 44px; + } + + .main { + flex: 1 1 70%; + } + + .title { + height: 22px; + width: 100px; + margin-bottom: 8px; + } + + .info { + height: 18px; + width: 200px; + margin-bottom: 16px; + } + + .footer { + height: 18px; + width: 70%; + } + + .prize { + height: 18px; + width: 60px; + margin-bottom: 8px; + margin-right: 40px; + } + + .prize-nominal { + height: 42px; + width: 40px; + } +} diff --git a/src/containers/Challenges/Listing/index.jsx b/src/containers/Challenges/Listing/index.jsx index e376d19..4934b8c 100644 --- a/src/containers/Challenges/Listing/index.jsx +++ b/src/containers/Challenges/Listing/index.jsx @@ -9,14 +9,16 @@ import ChallengeItem from "./ChallengeItem"; import TextInput from "../../../components/TextInput"; import Dropdown from "../../../components/Dropdown"; import DateRangePicker from "../../../components/DateRangePicker"; +import ChallengeLoading from "../../../components/challenge-listing/ChallengeLoading"; import * as utils from "../../../utils"; + import * as constants from "../../../constants"; import IconSearch from "../../../assets/icons/search.svg"; - import "./styles.scss"; const Listing = ({ challenges, + loadingChallenges, search, page, perPage, @@ -111,7 +113,9 @@ const Listing = ({ - {challenges.length ? ( + {loadingChallenges ? + _.times(3, () => ) : + challenges.length ? ( {challenges.map((challenge, index) => (
{ const [isLoggedIn, setIsLoggedIn] = useState(null); @@ -85,11 +88,12 @@ const Challenges = ({ */} - {initialized && ( + {initialized ? ( <> {/*noRecommendedChallenges && */} + ) : ( + + + + + )}
); @@ -128,6 +138,7 @@ Challenges.propTypes = { initialized: PT.bool, updateQuery: PT.func, tags: PT.arrayOf(PT.string), + loadingChallenges: PT.bool, }; const mapStateToProps = (state) => ({ @@ -146,6 +157,7 @@ const mapStateToProps = (state) => ({ recommendedChallenges: state.challenges.recommendedChallenges, initialized: state.challenges.initialized, tags: state.filter.challenge.tags, + loadingChallenges: state.challenges.loadingChallenges }); const mapDispatchToProps = { diff --git a/src/reducers/challenges.js b/src/reducers/challenges.js index 31ae15a..7b1ab25 100644 --- a/src/reducers/challenges.js +++ b/src/reducers/challenges.js @@ -1,7 +1,7 @@ import { handleActions } from "redux-actions"; const defaultState = { - loadingChallenges: false, + loadingChallenges: true, loadingChallengesError: null, challenges: [], challengesMeta: {}, @@ -14,7 +14,7 @@ const defaultState = { }; function onGetChallengesInit(state) { - return { ...state, loadingChallenges: true, loadingChallengesError: null }; + return { ...state, challenges: [], loadingChallenges: true, loadingChallengesError: null }; } function onGetChallengesDone(state, { error, payload }) { @@ -57,7 +57,7 @@ function onGetChallengesFailure(state, { payload }) { export default handleActions( { - GET_CHALLENGE_INIT: onGetChallengesInit, + GET_CHALLENGES_INIT: onGetChallengesInit, GET_CHALLENGES_DONE: onGetChallengesDone, }, defaultState From dad97d21016f4dd6f938a012cf09c0c36846f327 Mon Sep 17 00:00:00 2001 From: mfikria Date: Thu, 25 Nov 2021 17:02:42 +0700 Subject: [PATCH 2/2] update margin --- .../challenge-listing/ChallengeLoading/styles.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/challenge-listing/ChallengeLoading/styles.module.scss b/src/components/challenge-listing/ChallengeLoading/styles.module.scss index 7599b17..f0b4ed9 100644 --- a/src/components/challenge-listing/ChallengeLoading/styles.module.scss +++ b/src/components/challenge-listing/ChallengeLoading/styles.module.scss @@ -31,7 +31,7 @@ .challenge-loading { height: 126px; padding: 16px; - margin: 0 16px; + margin: 0 24px; display: flex; border-bottom: 1px solid #E9E9E9; border-top: 1px solid #E9E9E9;