Lazy import tabs

src/Transaction.tsx

@@ -5,8 +5,6 @@ import StandardFrame from "./StandardFrame";
 import StandardSubtitle from "./StandardSubtitle";
 import ContentFrame from "./ContentFrame";
 import NavTab from "./components/NavTab";
-import Details from "./transaction/Details";
-import Logs from "./transaction/Logs";
 import { RuntimeContext } from "./useRuntime";
 import { SelectionContext, useSelection } from "./useSelection";
 import { useInternalOperations, useTxData } from "./useErigonHooks";
@@ -14,6 +12,20 @@ import { useETHUSDOracle } from "./usePriceOracle";
 import { useAppConfigContext } from "./useAppConfig";
 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 = {
   txhash: string;
 };
@@ -77,6 +89,7 @@ const Transaction: React.FC = () => {
               )}
             </Tab.List>
           </Tab.Group>
+          <React.Suspense fallback={null}>
             <Switch>
               <Route path="/tx/:txhash/" exact>
                 <Details
@@ -93,6 +106,7 @@ const Transaction: React.FC = () => {
                 <Logs txData={txData} metadata={metadata} />
               </Route>
             </Switch>
+          </React.Suspense>
         </SelectionContext.Provider>
       )}
     </StandardFrame>