Revert balance loading updates

z3us-dapps · May 10, 2024 · 0a796d8 · 0a796d8
1 parent 75cd78a
commit 0a796d8
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 126 deletions.
diff --git a/apps/extension/src/components/layout/index.tsx b/apps/extension/src/components/layout/index.tsx
@@ -1,5 +1,4 @@
-import { useSelectedAccountsBalances } from 'packages/ui/src/hooks/dapp/use-balances'
-import React, { Suspense, useEffect, useMemo, useState } from 'react'
+import React, { Suspense, useEffect, useState } from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
 import { defineMessages, useIntl } from 'react-intl'
 import { Outlet, useLocation } from 'react-router-dom'
@@ -19,7 +18,6 @@ import { config } from '@src/config'
 import { useIsUnlocked } from '@src/hooks/use-is-unlocked'
 import { getTheme } from '@src/styles/theme'
 
-import Loading from './loading'
 import Unlock from './unlock'
 
 const popupUrl = browser.runtime.getURL('')
@@ -44,7 +42,6 @@ const messages = defineMessages({
 	},
 })
 
-const minLoadingTimeMS = 350
 const radixConnectorExtensionId = 'bfeplaecgkoeckiidkgkmlllfbaeplgm'
 
 const Layout: React.FC = () => {
@@ -57,24 +54,8 @@ const Layout: React.FC = () => {
 		keystoreId: state.selectedKeystoreId,
 	}))
 
-	const [isLoadingDeadlineFinished, setIsLoadingDeadlineFinished] = useState<boolean>(false)
-	const [hideLoadingScreen, setHideLoadingScreen] = useState<boolean>(false)
-	const { isLoading: isLoadingBalances } = useSelectedAccountsBalances()
 	const [hasConnector, setHasConnector] = useState<boolean>(false)
 
-	useEffect(() => {
-		const timer = setTimeout(() => {
-			setIsLoadingDeadlineFinished(true)
-		}, minLoadingTimeMS)
-		return () => clearTimeout(timer)
-	}, [])
-
-	useEffect(() => {
-		if (!isLoading && !isLoadingBalances && isLoadingDeadlineFinished) {
-			setHideLoadingScreen(true)
-		}
-	}, [isLoading, isLoadingBalances, isLoadingDeadlineFinished])
-
 	useEffect(() => {
 		const rootElement = document.getElementById('root')
 		if (rootElement) {
@@ -98,46 +79,42 @@ const Layout: React.FC = () => {
 		}
 	}, [keystoreId, isLoading, isUnlocked, location.pathname])
 
-	const showUnlockScreen = useMemo(
-		() => !location.pathname.startsWith('/keystore/new') && !isUnlocked,
-		[location, isUnlocked],
-	)
-
 	const handleConfirm = () => {
 		setHasConnector(false)
 	}
 
+	if (!location.pathname.startsWith('/keystore/new')) {
+		if (isLoading || !keystoreId) return <FallbackLoading />
+		if (!isUnlocked) return <Unlock onUnlock={reload} />
+	}
+
 	return (
 		<>
-			<Loading display={!hideLoadingScreen ? 'flex' : 'none'} />
-			<Unlock display={hideLoadingScreen && showUnlockScreen ? 'flex' : 'none'} onUnlock={reload} />
-			<Box display={hideLoadingScreen && !showUnlockScreen ? undefined : 'none'}>
-				<DialogAlert
-					open={hasConnector}
-					title={intl.formatMessage(messages.title)}
-					description={
-						<Box component="span">
-							<Text>{intl.formatMessage(messages.description)}</Text>
-						</Box>
-					}
-					confirmButtonText={intl.formatMessage(messages.button_text)}
-					cancelButtonText={intl.formatMessage(messages.cancel_button_text)}
-					onConfirm={handleConfirm}
-					onCancel={handleConfirm}
-					confirmButtonStyleVariant="primary"
-				/>
-				<Suspense fallback={<FallbackLoading />}>
-					<ErrorBoundary fallbackRender={FallbackRenderer}>
-						<Outlet />
-					</ErrorBoundary>
+			<DialogAlert
+				open={hasConnector}
+				title={intl.formatMessage(messages.title)}
+				description={
+					<Box component="span">
+						<Text>{intl.formatMessage(messages.description)}</Text>
+					</Box>
+				}
+				confirmButtonText={intl.formatMessage(messages.button_text)}
+				cancelButtonText={intl.formatMessage(messages.cancel_button_text)}
+				onConfirm={handleConfirm}
+				onCancel={handleConfirm}
+				confirmButtonStyleVariant="primary"
+			/>
+			<Suspense fallback={<FallbackLoading />}>
+				<ErrorBoundary fallbackRender={FallbackRenderer}>
+					<Outlet />
+				</ErrorBoundary>
+			</Suspense>
+			{Object.keys(modals).map(id => (
+				<Suspense key={id} fallback={<FallbackLoading />}>
+					<ErrorBoundary fallbackRender={FallbackRenderer}>{modals[id]}</ErrorBoundary>
 				</Suspense>
-				{Object.keys(modals).map(id => (
-					<Suspense key={id} fallback={<FallbackLoading />}>
-						<ErrorBoundary fallbackRender={FallbackRenderer}>{modals[id]}</ErrorBoundary>
-					</Suspense>
-				))}
-				<Toasts />
-			</Box>
+			))}
+			<Toasts />
 		</>
 	)
 }

diff --git a/packages/ui/src/pages/accounts/components/activity-list/components/side-bar-total/index.tsx b/packages/ui/src/pages/accounts/components/activity-list/components/side-bar-total/index.tsx
@@ -1,5 +1,4 @@
 import clsx from 'clsx'
-import { FallbackLoading } from 'packages/ui/src/components/fallback-renderer'
 import React, { useState } from 'react'
 import { defineMessages, useIntl } from 'react-intl'
 
@@ -22,7 +21,7 @@ export const SideBarTotal: React.FC = () => {
 	const intl = useIntl()
 	const isAllAccounts = useIsAllAccounts()
 
-	const { formattedXrdValue, formattedValue, formattedChange, value, xrdValue, change, isLoading } = useTotalBalance()
+	const { formattedXrdValue, formattedValue, formattedChange, value, xrdValue, change } = useTotalBalance()
 
 	const [format, setFormat] = useState<'currency' | 'xrd'>('currency')
 
@@ -37,26 +36,20 @@ export const SideBarTotal: React.FC = () => {
 			</Text>
 			<ToolTip message={format === 'currency' ? value : xrdValue}>
 				<Box display="flex" alignItems="center" gap="small" onClick={handleToggleValue}>
-					{isLoading ? (
-						<FallbackLoading />
-					) : (
-						<Text weight="medium" size="xxlarge" color="strong" truncate className={styles.totalValueWrapper}>
-							{format === 'currency' ? formattedValue : `${formattedXrdValue} XRD`}
-						</Text>
-					)}
+					<Text weight="medium" size="xxlarge" color="strong" truncate className={styles.totalValueWrapper}>
+						{format === 'currency' ? formattedValue : `${formattedXrdValue} XRD`}
+					</Text>
 				</Box>
 			</ToolTip>
-			{!isLoading && (
-				<RedGreenText
-					size="xlarge"
-					weight="regular"
-					truncate
-					change={change}
-					className={styles.mobileBalanceRedGreenChange}
-				>
-					{formattedChange}
-				</RedGreenText>
-			)}
+			<RedGreenText
+				size="xlarge"
+				weight="regular"
+				truncate
+				change={change}
+				className={styles.mobileBalanceRedGreenChange}
+			>
+				{formattedChange}
+			</RedGreenText>
 		</Box>
 	)
 }
diff --git a/packages/ui/src/pages/accounts/components/assets-list/index.tsx b/packages/ui/src/pages/accounts/components/assets-list/index.tsx
@@ -1,4 +1,3 @@
-import { FallbackLoading } from 'packages/ui/src/components/fallback-renderer'
 import React from 'react'
 import { defineMessages, useIntl } from 'react-intl'
 import { Link, useParams } from 'react-router-dom'
@@ -54,7 +53,6 @@ export const AssetsList: React.FC = () => {
 			poolUnitsValue = 0,
 			poolUnitsChange = 0,
 		},
-		isLoading,
 	} = useSelectedAccountsBalances()
 
 	const rows = {
@@ -86,48 +84,44 @@ export const AssetsList: React.FC = () => {
 
 	return (
 		<Box className={styles.assetsList}>
-			{Object.keys(rows).map(path =>
-				isLoading ? (
-					<FallbackLoading key={path} />
-				) : (
-					<Link key={path} to={`/accounts/${accountId}/${path}`} className={styles.assetsListLink}>
-						<Box className={styles.assetsListTitleWrapper}>
-							<Text capitalizeFirstLetter color="strong" weight="medium" size="small">
-								{rows[path].title}
+			{Object.keys(rows).map(path => (
+				<Link key={path} to={`/accounts/${accountId}/${path}`} className={styles.assetsListLink}>
+					<Box className={styles.assetsListTitleWrapper}>
+						<Text capitalizeFirstLetter color="strong" weight="medium" size="small">
+							{rows[path].title}
+						</Text>
+						{rows[path].balances.length > 0 && (
+							<Text size="small" truncate>
+								({rows[path].balances.length})
 							</Text>
-							{rows[path].balances.length > 0 && (
-								<Text size="small" truncate>
-									({rows[path].balances.length})
+						)}
+						<Box className={styles.assetsListTitleChevronWrapper}>
+							<ChevronRightIcon />
+						</Box>
+					</Box>
+					<Box className={styles.assetsListBalancesWrapper}>
+						<OverlayAssetIcons resourceType={path.slice(0, -1) as any} balances={rows[path].balances} />
+						<Box className={styles.assetsListBalancesTextWrapper}>
+							{rows[path].value !== 0 && (
+								<Text weight="strong" size="small" color="strong" truncate className={styles.assetsListBalancesText}>
+									{intl.formatNumber(rows[path].value, { currency, ...CURRENCY_STYLES })}
 								</Text>
 							)}
-							<Box className={styles.assetsListTitleChevronWrapper}>
-								<ChevronRightIcon />
-							</Box>
-						</Box>
-						<Box className={styles.assetsListBalancesWrapper}>
-							<OverlayAssetIcons resourceType={path.slice(0, -1) as any} balances={rows[path].balances} />
-							<Box className={styles.assetsListBalancesTextWrapper}>
-								{rows[path].value !== 0 && (
-									<Text weight="strong" size="small" color="strong" truncate className={styles.assetsListBalancesText}>
-										{intl.formatNumber(rows[path].value, { currency, ...CURRENCY_STYLES })}
-									</Text>
-								)}
 
-								{rows[path].change !== 0 && (
-									<RedGreenText
-										size="small"
-										change={rows[path].change}
-										truncate
-										className={styles.assetsListBalancesText}
-									>
-										{intl.formatNumber(rows[path].change, PERCENTAGE_STYLES)}
-									</RedGreenText>
-								)}
-							</Box>
+							{rows[path].change !== 0 && (
+								<RedGreenText
+									size="small"
+									change={rows[path].change}
+									truncate
+									className={styles.assetsListBalancesText}
+								>
+									{intl.formatNumber(rows[path].change, PERCENTAGE_STYLES)}
+								</RedGreenText>
+							)}
 						</Box>
-					</Link>
-				),
-			)}
+					</Box>
+				</Link>
+			))}
 		</Box>
 	)
 }
diff --git a/packages/ui/src/pages/accounts/components/layout/components/total-value/index.tsx b/packages/ui/src/pages/accounts/components/layout/components/total-value/index.tsx
@@ -1,5 +1,4 @@
 import clsx from 'clsx'
-import { FallbackLoading } from 'packages/ui/src/components/fallback-renderer'
 import React, { useState } from 'react'
 
 import { Box } from 'ui/src/components/box'
@@ -12,7 +11,7 @@ import { useTotalBalance } from 'ui/src/hooks/dapp/use-total-balance'
 import * as styles from './styles.css'
 
 export const AccountTotalValue: React.FC = () => {
-	const { formattedXrdValue, formattedValue, formattedChange, value, xrdValue, change, isLoading } = useTotalBalance()
+	const { formattedXrdValue, formattedValue, formattedChange, value, xrdValue, change } = useTotalBalance()
 
 	const [format, setFormat] = useState<'currency' | 'xrd'>('currency')
 
@@ -30,21 +29,15 @@ export const AccountTotalValue: React.FC = () => {
 							onClick={handleToggleValue}
 							className={clsx(styles.totalValueWrapper, plainButtonStyles.plainButtonHoverWrapper)}
 						>
-							{isLoading ? (
-								<FallbackLoading />
-							) : (
-								<Text weight="strong" size="xxxlarge" color="strong" truncate>
-									{format === 'currency' ? formattedValue : `${formattedXrdValue} XRD`}
-								</Text>
-							)}
+							<Text weight="strong" size="xxxlarge" color="strong" truncate>
+								{format === 'currency' ? formattedValue : `${formattedXrdValue} XRD`}
+							</Text>
 						</Box>
 					</ToolTip>
 				</Box>
-				{!isLoading && (
-					<RedGreenText size="xxsmall" weight="medium" truncate change={change}>
-						{formattedChange}
-					</RedGreenText>
-				)}
+				<RedGreenText size="xxsmall" weight="medium" truncate change={change}>
+					{formattedChange}
+				</RedGreenText>
 			</Box>
 		</Box>
 	)