Add: create colony TokenSelector loading state

JoinColony · May 8, 2024 · 473586c · 473586c
1 parent 5b225d2
commit 473586c
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 0 deletions.
diff --git a/src/components/common/Onboarding/wizardSteps/CreateColony/TokenSelector.tsx b/src/components/common/Onboarding/wizardSteps/CreateColony/TokenSelector.tsx
@@ -50,6 +50,15 @@ const TokenSelector = ({
 
   const token = data?.getTokenFromEverywhere?.items?.[0] ?? null;
 
+  useEffect(() => {
+    if (isFetchingAddress) {
+      setIsLoading(true);
+    }
+    if (data) {
+      setIsLoading(false);
+    }
+  }, [data, isFetchingAddress, setIsLoading]);
+
   useEffect(() => {
     if (isFetchingAddress) {
       return;

diff --git a/src/components/common/Onboarding/wizardSteps/CreateColony/TokenSelectorInput.tsx b/src/components/common/Onboarding/wizardSteps/CreateColony/TokenSelectorInput.tsx
@@ -4,7 +4,9 @@ import { useFormContext } from 'react-hook-form';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { DEFAULT_NETWORK_INFO } from '~constants';
+import SpinnerLoader from '~shared/Preloaders/SpinnerLoader.tsx';
 import { type Token } from '~types/graphql.ts';
+import { formatText } from '~utils/intl.ts';
 import { getNetworkByChainId } from '~utils/web3/index.ts';
 
 import { getInputError } from '../shared.ts';
@@ -35,6 +37,10 @@ const MSG = defineMessages({
     defaultMessage:
       'If you are certain that the token address is correct, it may not exist on the Gnosis Chain, try switching your wallet’s connected blockchain or continue to the next step.',
   },
+  loadingToken: {
+    id: `${displayName}.loadingToken`,
+    defaultMessage: `Fetching your token's details ...`,
+  },
 });
 
 const TokenSelectorInput = ({
@@ -78,6 +84,15 @@ const TokenSelectorInput = ({
         isDecoratedError
       />
 
+      {isLoading && (
+        <div className="mt-[5px] text-sm text-gray-600">
+          <SpinnerLoader />
+          <span className="ml-2 align-text-bottom">
+            {formatText(MSG.loadingToken)}
+          </span>
+        </div>
+      )}
+
       {doesTokenExistError && isLoading === false && (
         <div className="mt-14 rounded border border-warning-200 bg-warning-100 px-6 py-3 text-gray-900">
           <p className="flex items-center gap-2 self-start pb-1 text-md">