Lazy import tabs

This commit is contained in:
Willian Mitsuda 2021-10-24 01:04:18 -03:00
parent 5e4be33121
commit 24e05e06e9
1 changed files with 32 additions and 18 deletions

View File

@ -5,8 +5,6 @@ import StandardFrame from "./StandardFrame";
import StandardSubtitle from "./StandardSubtitle"; import StandardSubtitle from "./StandardSubtitle";
import ContentFrame from "./ContentFrame"; import ContentFrame from "./ContentFrame";
import NavTab from "./components/NavTab"; import NavTab from "./components/NavTab";
import Details from "./transaction/Details";
import Logs from "./transaction/Logs";
import { RuntimeContext } from "./useRuntime"; import { RuntimeContext } from "./useRuntime";
import { SelectionContext, useSelection } from "./useSelection"; import { SelectionContext, useSelection } from "./useSelection";
import { useInternalOperations, useTxData } from "./useErigonHooks"; import { useInternalOperations, useTxData } from "./useErigonHooks";
@ -14,6 +12,20 @@ import { useETHUSDOracle } from "./usePriceOracle";
import { useAppConfigContext } from "./useAppConfig"; import { useAppConfigContext } from "./useAppConfig";
import { useSourcify, useTransactionDescription } from "./useSourcify"; import { useSourcify, useTransactionDescription } from "./useSourcify";
const Details = React.lazy(
() =>
import(
/* webpackChunkName: "txdetails", webpackPrefetch: true */
"./transaction/Details"
)
);
const Logs = React.lazy(
() =>
import(
/* webpackChunkName: "txlogs", webpackPrefetch: true */ "./transaction/Logs"
)
);
type TransactionParams = { type TransactionParams = {
txhash: string; txhash: string;
}; };
@ -77,22 +89,24 @@ const Transaction: React.FC = () => {
)} )}
</Tab.List> </Tab.List>
</Tab.Group> </Tab.Group>
<Switch> <React.Suspense fallback={null}>
<Route path="/tx/:txhash/" exact> <Switch>
<Details <Route path="/tx/:txhash/" exact>
txData={txData} <Details
txDesc={txDesc} txData={txData}
userDoc={metadata?.output.userdoc} txDesc={txDesc}
devDoc={metadata?.output.devdoc} userDoc={metadata?.output.userdoc}
internalOps={internalOps} devDoc={metadata?.output.devdoc}
sendsEthToMiner={sendsEthToMiner} internalOps={internalOps}
ethUSDPrice={blockETHUSDPrice} sendsEthToMiner={sendsEthToMiner}
/> ethUSDPrice={blockETHUSDPrice}
</Route> />
<Route path="/tx/:txhash/logs/" exact> </Route>
<Logs txData={txData} metadata={metadata} /> <Route path="/tx/:txhash/logs/" exact>
</Route> <Logs txData={txData} metadata={metadata} />
</Switch> </Route>
</Switch>
</React.Suspense>
</SelectionContext.Provider> </SelectionContext.Provider>
)} )}
</StandardFrame> </StandardFrame>