lazy load graph images

src/components/CustomNode/ObjectNode.tsx

@@ -12,13 +12,18 @@ const ObjectNode: React.FC<CustomNodeProps> = ({ node, x, y }) => {
     <Styled.StyledForeignObject width={width} height={height} x={0} y={0} ref={ref} isObject>
       {text.map((val, idx) => {
         return (
-          <Styled.StyledRow data-key={JSON.stringify(val)} data-x={x} data-y={y + idx * 17.8} key={idx}>
+          <Styled.StyledRow
+            data-key={JSON.stringify(val)}
+            data-x={x}
+            data-y={y + idx * 17.8}
+            key={idx}
+          >
             <Styled.StyledKey objectKey>
               {JSON.stringify(val[0]).replaceAll('"', "")}:{" "}
             </Styled.StyledKey>
             <Styled.StyledLinkItUrl>{JSON.stringify(val[1])}</Styled.StyledLinkItUrl>
           </Styled.StyledRow>
-        )
+        );
       })}
     </Styled.StyledForeignObject>
   );

src/components/CustomNode/TextNode.tsx

@@ -71,7 +71,7 @@ const TextNode: React.FC<CustomNodeProps> = ({ node, x, y, hasCollapse = false }
     >
       {isImage ? (
         <StyledImageWrapper>
-          <StyledImage src={text} width="70" height="70" />
+          <StyledImage src={text} width="70" height="70" loading="lazy" />
         </StyledImageWrapper>
       ) : (
         <StyledTextNodeWrapper

src/components/CustomNode/styles.tsx

@@ -6,7 +6,7 @@ const robotoMono = Roboto_Mono({
   weight: "500",
   subsets: ["latin"],
   display: "swap",
-  fallback: ["Arial, Helvetica, sans-serif", "Tahoma, Verdana, sans-serif"]
+  fallback: ["Arial, Helvetica, sans-serif", "Tahoma, Verdana, sans-serif"],
 });
 
 function getTypeColor(value: string, theme: DefaultTheme) {

src/components/Graph/PremiumView.tsx

@@ -38,7 +38,9 @@ export const PremiumView = () => (
     <StyledInfo>
       Upgrade JSON Crack to premium and explore & unlock full potantial of your data!
     </StyledInfo>
-    <Button status="TERTIARY" href="https://www.patreon.com/jsoncrack" link target="_blank">DO IT!</Button>
+    <Button status="TERTIARY" href="https://www.patreon.com/jsoncrack" link target="_blank">
+      DO IT!
+    </Button>
     <img src="/assets/undraw_to_the_stars_re_wq2x.svg" width="300" height="300" alt="oops" />
   </StyledPremiumView>
 );

src/components/Graph/index.tsx

@@ -18,7 +18,7 @@ interface GraphProps {
 const StyledEditorWrapper = styled.div<{ widget: boolean }>`
   position: absolute;
   width: 100%;
-  height: ${({ widget }) => widget ? "calc(100vh - 36px)" : "calc(100vh - 65px)"};
+  height: ${({ widget }) => (widget ? "calc(100vh - 36px)" : "calc(100vh - 65px)")};
   background: ${({ theme }) => theme.BACKGROUND_SECONDARY};
   background-image: ${({ theme }) =>
     `radial-gradient(#505050 0.5px, ${theme.BACKGROUND_SECONDARY} 0.5px)`};

src/components/SearchInput/index.tsx

@@ -84,7 +84,7 @@ export const SearchInput: React.FC = () => {
           hasInput={!!content.value.length}
         />
         <StyledCountInfo>
-          {content.value && `${nodeCount}/${nodeCount > 0 ? currentNode + 1 : "0"}` }
+          {content.value && `${nodeCount}/${nodeCount > 0 ? currentNode + 1 : "0"}`}
         </StyledCountInfo>
         <StyledSearchButton type="reset" aria-label="search" onClick={handleClear}>
           {content.value ? <IoCloseSharp size={18} /> : <AiOutlineSearch size={18} />}

src/containers/Modals/ImportModal/index.tsx

@@ -54,14 +54,14 @@ export const ImportModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
   const handleFileDrag = (e: React.DragEvent<HTMLLabelElement>) => {
     e.preventDefault();
 
-    if (e.type === 'drop' && e.dataTransfer.files.length) {
-      if (e.dataTransfer.files[0].type === 'application/json') {
-        setJsonFile(e.dataTransfer.files[0])
+    if (e.type === "drop" && e.dataTransfer.files.length) {
+      if (e.dataTransfer.files[0].type === "application/json") {
+        setJsonFile(e.dataTransfer.files[0]);
       } else {
-        toast.error('Please upload JSON file!')
+        toast.error("Please upload JSON file!");
       }
     }
-  }
+  };
 
   const handleImportFile = () => {
     if (url) {
@@ -100,10 +100,7 @@ export const ImportModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
           placeholder="URL of JSON to fetch"
           autoFocus
         />
-        <StyledUploadWrapper
-          onDrop={handleFileDrag}
-          onDragOver={handleFileDrag}
-        >
+        <StyledUploadWrapper onDrop={handleFileDrag} onDragOver={handleFileDrag}>
           <input
             key={jsonFile?.name}
             onChange={handleFileChange}

src/pages/_app.tsx

@@ -15,7 +15,7 @@ const monaSans = localFont({
   src: "./Mona-Sans.woff2",
   variable: "--mona-sans",
   display: "swap",
-  fallback: ["Arial, Helvetica, sans-serif", "Tahoma, Verdana, sans-serif"]
+  fallback: ["Arial, Helvetica, sans-serif", "Tahoma, Verdana, sans-serif"],
 });
 
 if (process.env.NODE_ENV !== "development") {

src/pages/widget.tsx

@@ -57,9 +57,11 @@ const WidgetPage = () => {
   const setGraph = useGraph(state => state.setGraph);
 
   React.useEffect(() => {
-    if (isReady) {      
+    if (isReady) {
       if (query.partner === "true") {
-        getPartnerStatus(window.location.ancestorOrigins[0]).then(r => r.data?.premium && setIsPremium(!!r.data.premium));
+        getPartnerStatus(window.location.ancestorOrigins[0]).then(
+          r => r.data?.premium && setIsPremium(!!r.data.premium)
+        );
       }
 
       fetchJson(query.json);

src/services/db/widget.ts

@@ -1,6 +1,8 @@
 import { altogic, AltogicResponse } from "src/api/altogic";
 
-const getPartnerStatus = async (parentURL: string): Promise<AltogicResponse<{ premium: boolean }>> => {
+const getPartnerStatus = async (
+  parentURL: string
+): Promise<AltogicResponse<{ premium: boolean }>> => {
   return await altogic.endpoint.get("/partner", {}, { parentURL });
 };
 

src/store/useGraph.tsx

@@ -1,9 +1,9 @@
 import { ReactZoomPanPinchRef } from "react-zoom-pan-pinch";
 import { CanvasDirection } from "reaflow";
 import { Graph } from "src/components/Graph";
+import { parser } from "src/utils/core/jsonParser";
 import { getChildrenEdges } from "src/utils/getChildrenEdges";
 import { getOutgoers } from "src/utils/getOutgoers";
-import { parser } from "src/utils/core/jsonParser";
 import { create } from "zustand";
 import useJson from "./useJson";
 

src/store/useJson.tsx

@@ -84,7 +84,7 @@ const useJson = create<JsonStates & JsonActions>()((set, get) => ({
     }
   },
   setJson: json => {
-    useGraph.getState().setGraph(json);    
+    useGraph.getState().setGraph(json);
     set({ json: JSON.stringify(JSON.parse(json), null, 2), hasChanges: true });
   },
   saveJson: async (isNew = true) => {