Lazy load components

Author: ajhai

llmstack/client/src/components/apps/AppPreview.jsx

@@ -1,8 +1,9 @@
-import { useEffect, useState } from "react";
+import { lazy, useEffect, useState } from "react";
 import { useRecoilValue } from "recoil";
 import { isMobileState } from "../../data/atoms";
 import { Ws } from "../../data/ws";
-import { AppRenderer } from "./renderer/AppRenderer";
+
+const AppRenderer = lazy(() => import("./renderer/AppRenderer"));
 
 export function AppPreview(props) {
   const { app } = props;

llmstack/client/src/components/apps/Published.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { lazy, useEffect, useRef, useState } from "react";
 import {
   AppBar,
   Avatar,
@@ -17,10 +17,11 @@ import {
 } from "@mui/icons-material";
 import { ReactComponent as GithubIcon } from "../../assets/images/icons/github.svg";
 import { TwitterIcon, TwitterShareButton } from "react-share";
-import { AppRenderer } from "./renderer/AppRenderer";
 import logo from "../../assets/logo.png";
 import "./Published.css";
 
+const AppRenderer = lazy(() => import("./renderer/AppRenderer"));
+
 const SITE_NAME = process.env.REACT_APP_SITE_NAME || "LLMStack";
 
 export const PublishedAppHeader = ({ appName, appLogo, appIsShareable }) => {

llmstack/client/src/components/apps/renderer/AppRenderer.jsx

@@ -10,7 +10,6 @@ import React, {
 import ReactGA from "react-ga4";
 import { useLocation } from "react-router-dom";
 import { stitchObjects } from "../../../data/utils";
-import LayoutRenderer from "./LayoutRenderer";
 import {
   AppMessage,
   AppErrorMessage,
@@ -23,9 +22,11 @@ import {
 import { axios } from "../../../data/axios";
 import { isLoggedInState, appRunDataState } from "../../../data/atoms";
 import { useSetRecoilState, useRecoilValue } from "recoil";
-import LoginDialog from "../../LoginDialog";
 import logo from "../../../assets/promptly-icon.png";
 
+const LayoutRenderer = React.lazy(() => import("./LayoutRenderer"));
+const LoginDialog = React.lazy(() => import("../../LoginDialog"));
+
 export const defaultWorkflowLayout = `<pa-layout sx='{"maxWidth": "1200px", "margin": "10px auto"}'>
   <pa-paper style="padding: 10px;">
     <pa-grid container="true" spacing="2" style="width: 100%">
@@ -53,7 +54,7 @@ export const defaultChatLayout = `<pa-layout sx='{"maxWidth": "1200px", "margin"
     </pa-grid>
 </pa-layout>`;
 
-export function AppRenderer({ app, ws }) {
+export default function AppRenderer({ app, ws }) {
   const appSessionId = useRef(null);
   const location = useLocation();
   const [layout, setLayout] = useState("");

llmstack/client/src/components/store/StoreApp.jsx

@@ -2,10 +2,11 @@ import React, { useState, useEffect } from "react";
 import { Box } from "@mui/material";
 import Grid from "@mui/material/Unstable_Grid2";
 import { useRecoilValue } from "recoil";
-import { AppRenderer } from "../apps/renderer/AppRenderer";
 import { Ws } from "../../data/ws";
 import { storeAppState } from "../../data/atoms";
-import StoreAppHeader from "./StoreAppHeader";
+
+const AppRenderer = React.lazy(() => import("../apps/renderer/AppRenderer"));
+const StoreAppHeader = React.lazy(() => import("./StoreAppHeader"));
 
 export default function StoreApp({ appSlug }) {
   const storeApp = useRecoilValue(storeAppState(appSlug));

llmstack/client/src/pages/AppSessionShare.jsx

@@ -1,11 +1,14 @@
-import { useState } from "react";
+import { lazy, useState } from "react";
 import { useParams } from "react-router-dom";
 import { useRecoilValue } from "recoil";
 import { Button, useMediaQuery, useTheme, Stack } from "@mui/material";
 import Grid from "@mui/material/Unstable_Grid2";
 import { appRunShareSelector, isMobileState } from "../data/atoms";
-import Search from "../components/store/Search";
-import SessionRenderer from "../components/store/SessionRenderer";
+
+const Search = lazy(() => import("../components/store/Search"));
+const SessionRenderer = lazy(
+  () => import("../components/store/SessionRenderer"),
+);
 
 const AppSessionSharePage = () => {
   const shareCode = useParams().shareCode;

llmstack/client/src/pages/Home.jsx

@@ -1,11 +1,12 @@
 import { useParams } from "react-router-dom";
 import { Button, useMediaQuery, useTheme, Stack } from "@mui/material";
 import Grid from "@mui/material/Unstable_Grid2";
-import StoreApp from "../components/store/StoreApp";
-import Search from "../components/store/Search";
 import { useRecoilValue } from "recoil";
 import { isMobileState } from "../data/atoms";
-import { useState } from "react";
+import { lazy, useState } from "react";
+
+const StoreApp = lazy(() => import("../components/store/StoreApp"));
+const Search = lazy(() => import("../components/store/Search"));
 
 export default function HomePage() {
   const { appSlug = "super-agent" } = useParams();