Batch reading localstorage and rendering

components/ChainConnect/ChainsGroup.tsx

@@ -1,7 +1,7 @@
 import { ChainInfo } from "@/context/ChainsContext/types";
+import { useEffect, useRef, useState } from "react";
 import { CommandGroup } from "../ui/command";
 import ChainItem from "./ChainItem";
-import { useRef } from "react";
 
 interface ChainsGroupProps {
   readonly chains: readonly ChainInfo[];
@@ -11,6 +11,16 @@ interface ChainsGroupProps {
 
 export default function ChainsGroup({ chains, heading, emptyMsg }: ChainsGroupProps) {
   const containerRef = useRef<HTMLDivElement>(null);
+  const [numChainsToRender, setNumChainsToRender] = useState(10);
+
+  useEffect(() => {
+    // Unblock the main thread
+    setTimeout(() => {
+      if (numChainsToRender < chains.length) {
+        setNumChainsToRender((prev) => prev + 10);
+      }
+    }, 0);
+  }, [chains.length, numChainsToRender]);
 
   return (
     <CommandGroup
@@ -19,7 +29,7 @@ export default function ChainsGroup({ chains, heading, emptyMsg }: ChainsGroupPr
     >
       {chains.length ? (
         <div ref={containerRef} className="flex flex-wrap gap-2">
-          {chains.map((chain) => (
+          {chains.slice(0, numChainsToRender).map((chain) => (
             <ChainItem
               key={chain.registryName}
               chain={chain}

components/ChainConnect/ChooseChain.tsx

@@ -1,7 +1,7 @@
 import { useChains } from "@/context/ChainsContext";
 import { getRecentChainsFromStorage } from "@/context/ChainsContext/storage";
 import { ChainInfo } from "@/context/ChainsContext/types";
-import { useLayoutEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { Command, CommandEmpty, CommandInput, CommandList, CommandSeparator } from "../ui/command";
 import ChainsGroup from "./ChainsGroup";
 
@@ -9,9 +9,12 @@ export default function ChooseChain() {
   const { chains } = useChains();
   const [recentChains, setRecentChains] = useState<readonly ChainInfo[]>([]);
 
-  useLayoutEffect(() => {
-    const newRecentChains = getRecentChainsFromStorage(chains);
-    setRecentChains(newRecentChains);
+  useEffect(() => {
+    // Unblock the main thread
+    setTimeout(() => {
+      const newRecentChains = getRecentChainsFromStorage(chains);
+      setRecentChains(newRecentChains);
+    }, 0);
   }, [chains]);
 
   return (

components/ChainConnect/CustomChainForm.tsx

@@ -3,6 +3,7 @@ import { setNewConnection } from "@/context/ChainsContext/helpers";
 import { RegistryAsset } from "@/types/chainRegistry";
 import { zodResolver } from "@hookform/resolvers/zod";
 import dynamic from "next/dynamic";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import * as z from "zod";
 import { Button } from "../ui/button";
@@ -21,6 +22,14 @@ const JsonEditor = dynamic(() => import("../inputs/JsonEditor"), { ssr: false })
 
 export default function CustomChainForm() {
   const { chain, chains, newConnection, chainsDispatch } = useChains();
+  const [showAssetsEditor, setShowAssetsEditor] = useState(false);
+
+  useEffect(() => {
+    // Unblock the main thread
+    setTimeout(() => {
+      setShowAssetsEditor(true);
+    }, 0);
+  }, []);
 
   const formSchema = z
     .object({
@@ -246,25 +255,27 @@ export default function CustomChainForm() {
             </FormItem>
           )}
         />
-        <FormField
-          name="assets"
-          render={({ field }) => (
-            <FormItem className="mt-4">
-              <FormLabel>Assets</FormLabel>
-              <FormControl>
-                <div>
-                  <JsonEditor
-                    content={{ text: field.value }}
-                    onChange={(newMsgContent) => {
-                      field.onChange("text" in newMsgContent ? newMsgContent.text ?? "{}" : "{}");
-                    }}
-                  />
-                </div>
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
+        {showAssetsEditor ? (
+          <FormField
+            name="assets"
+            render={({ field }) => (
+              <FormItem className="mt-4">
+                <FormLabel>Assets</FormLabel>
+                <FormControl>
+                  <div>
+                    <JsonEditor
+                      content={{ text: field.value }}
+                      onChange={(newMsgContent) => {
+                        field.onChange("text" in newMsgContent ? newMsgContent.text ?? "{}" : "{}");
+                      }}
+                    />
+                  </div>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        ) : null}
         <Button type="submit" className="mt-4">
           Submit
         </Button>

components/inputs/JsonEditor.tsx

@@ -28,9 +28,9 @@ export default function JsonEditor({ label, ...editorProps }: JsonEditorProps) {
   const refEditor = useRef<VanillaJsonEditor | null>(null);
 
   useEffect(() => {
-    if (!refContainer.current) return;
-
-    refEditor.current = new VanillaJsonEditor({ target: refContainer.current, props: {} });
+    if (refContainer.current) {
+      refEditor.current = new VanillaJsonEditor({ target: refContainer.current, props: {} });
+    }
 
     return () => {
       if (refEditor.current) {