fix(create-new-team): display spinner while searching inside progress card button

* Fix an issue which was preventing loading spinner to be displayed inside the submit button of progress card.
* Adjust progress card percentage values, as per the design.

Addresses #406 (comment)

Author: cagdas001

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

@@ -80,11 +80,10 @@ function SearchContainer({
     return <NoMatchingProfilesResultCard role={matchingRole} />;
   };
 
-  const getPercentage = useCallback(() => {
-    if (searchState === "searching") return "26";
-    if (matchingRole) return "53";
-    return "84";
-  }, [searchState, matchingRole]);
+  const progressBarPercentage = useMemo(
+    () => (searchState === "searching" ? 53 : 84),
+    [searchState]
+  );
 
   return (
     <div styleName="page">
@@ -94,14 +93,14 @@ function SearchContainer({
         <Progress
           isDisabled={
             !buttonClickable ||
-            searchState === "searching" ||
             (searchState === "done" && (!addedRoles || !addedRoles.length))
           }
+          isSearching={searchState === "searching"}
           onClick={() => setAddAnotherOpen(true)}
           extraStyleName={progressStyle}
           buttonLabel="Continue"
           stages={stages}
-          percentage={getPercentage()}
+          percentage={progressBarPercentage}
         />
       </div>
       <AddAnotherModal

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

@@ -163,7 +163,7 @@ function SubmitContainer({
           isDisabled={!buttonClickable}
           buttonLabel="Continue"
           stages={stages}
-          percentage="98"
+          percentage="84"
         />
       </div>
       <AddAnotherModal

src/routes/CreateNewTeam/pages/CreateTaasPayment/index.jsx

@@ -160,7 +160,7 @@ const CreateTassPayment = () => {
         stages={stages}
         extraStyleName="role-selection final-step"
         disabled="true"
-        percentage="98"
+        percentage="97"
       />
     </div>
   );