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,22 +89,24 @@ const Transaction: React.FC = () => {
               )}
             </Tab.List>
           </Tab.Group>
-          <Switch>
-            <Route path="/tx/:txhash/" exact>
-              <Details
-                txData={txData}
-                txDesc={txDesc}
-                userDoc={metadata?.output.userdoc}
-                devDoc={metadata?.output.devdoc}
-                internalOps={internalOps}
-                sendsEthToMiner={sendsEthToMiner}
-                ethUSDPrice={blockETHUSDPrice}
-              />
-            </Route>
-            <Route path="/tx/:txhash/logs/" exact>
-              <Logs txData={txData} metadata={metadata} />
-            </Route>
-          </Switch>
+          <React.Suspense fallback={null}>
+            <Switch>
+              <Route path="/tx/:txhash/" exact>
+                <Details
+                  txData={txData}
+                  txDesc={txDesc}
+                  userDoc={metadata?.output.userdoc}
+                  devDoc={metadata?.output.devdoc}
+                  internalOps={internalOps}
+                  sendsEthToMiner={sendsEthToMiner}
+                  ethUSDPrice={blockETHUSDPrice}
+                />
+              </Route>
+              <Route path="/tx/:txhash/logs/" exact>
+                <Logs txData={txData} metadata={metadata} />
+              </Route>
+            </Switch>
+          </React.Suspense>
         </SelectionContext.Provider>
       )}
     </StandardFrame>