Optimize transfer loading (#799)

helix-bridge · Aug 20, 2024 · cf558e4 · cf558e4
1 parent 3d99249
commit cf558e4
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 14 deletions.
diff --git a/apps/web/src/components/transfer-chain-section.tsx b/apps/web/src/components/transfer-chain-section.tsx
@@ -60,12 +60,8 @@ export default function TransferChainSection({
 }: Props) {
   return (
     <div className="relative flex flex-col">
-      <ComponentLoading loading={loading} color="white" />
-      <TransferSection
-        loading={loading}
-        titleText="From"
-        titleTips={<TokenTips token={sourceToken} chain={sourceChain} />}
-      >
+      <ComponentLoading loading={loading} className="rounded-large backdrop-blur-[2px]" icon={false} />
+      <TransferSection titleText="From" titleTips={<TokenTips token={sourceToken} chain={sourceChain} />}>
         <TransferChainSelect
           chain={sourceChain}
           token={sourceToken}
@@ -77,7 +73,6 @@ export default function TransferChainSection({
       </TransferSection>
       <TransferSwitch disabled={disableSwitch || loading} onSwitch={onSwitch} />
       <TransferSection
-        loading={loading}
         titleText="To"
         titleTips={<TokenTips token={targetToken} chain={targetChain} />}
         recipient={recipient}

diff --git a/apps/web/src/components/transfer-section.tsx b/apps/web/src/components/transfer-section.tsx
@@ -14,7 +14,6 @@ interface Props {
   className?: string;
   titleText?: string;
   titleTips?: string | JSX.Element;
-  loading?: boolean;
   alert?: string;
   recipient?: Recipient;
   expandRecipient?: boolean;
@@ -25,7 +24,6 @@ interface Props {
 
 export default function TransferSection({
   alert,
-  loading,
   children,
   titleText,
   titleTips,
@@ -37,7 +35,7 @@ export default function TransferSection({
   onRecipientChange = () => undefined,
 }: PropsWithChildren<Props>) {
   return (
-    <div className={`gap-small flex flex-col transition-opacity ${loading ? "opacity-80" : "opacity-100"}`}>
+    <div className={`gap-small flex flex-col transition-opacity`}>
       <div
         className={`gap-medium rounded-large bg-app-bg py-medium flex flex-col transition-[outline] duration-200 ${className} ${
           alert ? "outline outline-1 outline-orange-500" : "outline-none"

diff --git a/apps/web/src/components/transfer-token-section.tsx b/apps/web/src/components/transfer-token-section.tsx
@@ -19,8 +19,8 @@ interface Props {
 export default function TransferTokenSection({ token, options, loading, onChange }: Props) {
   return (
     <div className="relative">
-      <ComponentLoading loading={loading} color="white" size="small" />
-      <TransferSection titleText="Token" loading={loading}>
+      <ComponentLoading loading={loading} className="rounded-large backdrop-blur-[2px]" icon={false} />
+      <TransferSection titleText="Token">
         <TransferTokenSelect value={token} options={options} onChange={onChange} />
       </TransferSection>
     </div>

diff --git a/apps/web/src/ui/component-loading.tsx b/apps/web/src/ui/component-loading.tsx
@@ -5,13 +5,14 @@ interface Props {
   size?: "small" | "large";
   color?: "white" | "primary" | "gray";
   className?: string;
+  icon?: JSX.Element | boolean;
 }
 
-export default function ComponentLoading({ loading, color, size = "large", className }: Props) {
+export default function ComponentLoading({ loading, color, size = "large", icon = true, className }: Props) {
   return (
     loading && (
       <div className={`absolute bottom-0 left-0 right-0 top-0 z-10 flex items-center justify-center ${className}`}>
-        <CountLoading size={size} color={color} />
+        {icon === true ? <CountLoading size={size} color={color} /> : icon ?? null}
       </div>
     )
   );