Update role search timing to 1500ms per frame.

topcoder-archive#373 (comment)

Author: mbaghel

src/constants/index.js

@@ -397,3 +397,9 @@ export const MIN_DURATION = 4;
  * Maximum allowed numbers of selecter skills for search.
  */
 export const MAX_SELECTED_SKILLS = 3;
+
+/**
+ * Milliseconds for each stage of role search
+ * There are 3 stages, so total search takes 3x this number
+ */
+export const SEARCH_STAGE_TIME = 1500;

src/routes/CreateNewTeam/components/SearchAndSubmit/index.jsx

@@ -2,6 +2,7 @@ import { Router, navigate } from "@reach/router";
 import _ from "lodash";
 import React, { useCallback, useState, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
+import { SEARCH_STAGE_TIME } from "constants/";
 import { searchRoles } from "services/teams";
 import { isCustomRole, setCurrentStage } from "utils/helpers";
 import {
@@ -14,7 +15,7 @@ import InputContainer from "../InputContainer";
 import SearchContainer from "../SearchContainer";
 import SubmitContainer from "../SubmitContainer";
 
-const SEARCHINGTIME = 1600;
+const SEARCHINGTIME = SEARCH_STAGE_TIME * 3 + 100;
 
 function SearchAndSubmit(props) {
   const { stages, setStages, searchObject, onClick, page } = props;
@@ -80,7 +81,9 @@ function SearchAndSubmit(props) {
             setCurrentStage(2, stages, setStages);
             setSearchState("done");
           },
-          Date.now() - searchingBegin > SEARCHINGTIME ? 0 : 1500
+          Date.now() - searchingBegin > SEARCHINGTIME
+            ? 0
+            : SEARCH_STAGE_TIME * 3
         );
       });
     // eslint-disable-next-line react-hooks/exhaustive-deps

src/routes/CreateNewTeam/components/SearchCard/index.jsx

@@ -9,6 +9,7 @@ import IconEarthSearch from "../../../../assets/images/icon-earth-search.svg";
 import WorldMapDotted from "../../../../assets/images/world-map-dotted.svg";
 import WorldMapSearch1 from "../../../../assets/images/world-map-search1.svg";
 import WorldMapSearch2 from "../../../../assets/images/world-map-search2.svg";
+import { SEARCH_STAGE_TIME } from "constants/";
 
 function SearchCard() {
   const [searchState, setSearchState] = useState(null);
@@ -19,8 +20,8 @@ function SearchCard() {
       setSearchState("state1");
       timer2 = setTimeout(() => {
         setSearchState("state2");
-      }, 500);
-    }, 500);
+      }, SEARCH_STAGE_TIME);
+    }, SEARCH_STAGE_TIME);
 
     return () => {
       clearTimeout(timer1);