fix: loader and message display

Greenstand · Aug 8, 2023 · c0fe17d · c0fe17d
1 parent 62bf9fd
commit c0fe17d
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/src/pages/SendTokens/SendTokens.js b/src/pages/SendTokens/SendTokens.js
@@ -1,6 +1,10 @@
 import React, { useState } from 'react';
 import { Paper } from '@mui/material';
-import { ContentContainer, StyledGrid } from './SendTokensStyled';
+import {
+ ContentContainer,
+ LoaderContainer,
+ StyledGrid,
+} from './SendTokensStyled';
 import PageHeader from '../../components/layout/PageHeader/PageHeader';
 import SendTokensForm from './SendTokensForm/SendTokensForm';
 import Message, {
@@ -74,6 +78,7 @@ const SendTokens = () => {
  // getTotalTokensAmount();
  setSenderWalletTokens((prev) => prev - data.tokensAmount);
 
+ setErrorMessage('');
  setSuccessMessage(
  `${data.tokensAmount} tokens were successfully sent from '${data.senderWallet}' to '${data.receiverWallet}' wallet. Status of the transfer: '${response.data.state}'`
  );
@@ -103,6 +108,7 @@ const SendTokens = () => {
  wallet: name,
  })
  .then(() => {
+ setErrorMessage('');
  setSuccessMessage(`Wallet ${name} created successfully!`);
  setCreatedWalletName(name);
  })
@@ -121,8 +127,6 @@ const SendTokens = () => {
  });
  };
 
- if (isLoading) return <Loader />;
-
  return (
  <StyledGrid>
  <PageHeader title="Send tokens" />
@@ -153,6 +157,11 @@ const SendTokens = () => {
  justifyContent: 'space-between',
  }}
  >
+ {isLoading && (
+ <LoaderContainer>
+ <Loader />
+ </LoaderContainer>
+ )}
  <SendTokensForm
  onSubmit={handleSendTokenForm}
  onCreateWallet={handleCreateWalled}

diff --git a/src/pages/SendTokens/SendTokensStyled.js b/src/pages/SendTokens/SendTokensStyled.js
@@ -33,3 +33,11 @@ export const ContentGrid = styled(Grid)({
  gridTemplateRows: 'repeat(1, 20rem)',
  },
 });
+
+export const LoaderContainer = styled('div')({
+ position: 'absolute',
+ top: '50%',
+ left: '50%',
+ transform: 'translate(-50%, -50%)',
+ zIndex: 9999,
+});