Use dynamic imports

Author: ajhai

llmstack/client/src/components/ThemedJsonForm.jsx

@@ -16,19 +16,28 @@ import {
 } from "@mui/material";
 import Form from "@rjsf/mui";
 import { getTemplate, getUiOptions } from "@rjsf/utils";
-import { useEffect, useState } from "react";
-import { TextFieldWithVars } from "./apps/TextFieldWithVars";
-import AppVersionSelector from "./apps/AppVersionSelector";
-import CustomObjectFieldTemplate from "./ConfigurationFormObjectFieldTemplate";
-import ConnectionSelector from "./connections/ConnectionSelector";
-import { DataSourceSelector } from "./datasource/DataSourceSelector";
-import FileUploadWidget from "./form/DropzoneFileWidget";
-import GdriveFileSelector from "./form/GdriveFileSelector";
-import SecretTextField from "./form/SecretTextField";
-import WebpageURLExtractorWidget from "./form/WebpageURLExtractorWidget";
-import VoiceRecorderWidget from "./form/VoiceRecorderWidget";
-import MuiCustomSelect from "./MuiCustomSelect";
-import MultiInputField from "./form/MultiInputField";
+import { lazy, useEffect, useState } from "react";
+
+const TextFieldWithVars = lazy(() => import("./apps/TextFieldWithVars"));
+const AppVersionSelector = lazy(() => import("./apps/AppVersionSelector"));
+const CustomObjectFieldTemplate = lazy(
+  () => import("./ConfigurationFormObjectFieldTemplate"),
+);
+const ConnectionSelector = lazy(
+  () => import("./connections/ConnectionSelector"),
+);
+const DataSourceSelector = lazy(
+  () => import("./datasource/DataSourceSelector"),
+);
+const FileUploadWidget = lazy(() => import("./form/DropzoneFileWidget"));
+const GdriveFileSelector = lazy(() => import("./form/GdriveFileSelector"));
+const SecretTextField = lazy(() => import("./form/SecretTextField"));
+const WebpageURLExtractorWidget = lazy(
+  () => import("./form/WebpageURLExtractorWidget"),
+);
+const VoiceRecorderWidget = lazy(() => import("./form/VoiceRecorderWidget"));
+const MuiCustomSelect = lazy(() => import("./MuiCustomSelect"));
+const MultiInputField = lazy(() => import("./form/MultiInputField"));
 
 function CustomGdriveFileWidget(props) {
   return <GdriveFileSelector {...props} />;

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

@@ -10,15 +10,18 @@ import {
   Typography,
 } from "@mui/material";
 import validator from "@rjsf/validator-ajv8";
-import { useEffect, useState } from "react";
+import { lazy, useEffect, useState } from "react";
 import { useValidationErrorsForAppComponents } from "../../data/appValidation";
-import ThemedJsonForm from "../ThemedJsonForm";
 import "./AppEditor.css";
-import { AppInputSchemaEditor } from "./AppInputSchemaEditor";
-import { AppStepCard } from "./AppStepCard";
-import { TextFieldWithVars } from "./TextFieldWithVars";
 import { getJSONSchemaFromInputFields } from "../../data/utils";
-import ImageGeneratorWidget from "../store/ImageGeneratorWidget";
+
+const ImageGeneratorWidget = lazy(
+  () => import("../store/ImageGeneratorWidget"),
+);
+const ThemedJsonForm = lazy(() => import("../ThemedJsonForm"));
+const AppInputSchemaEditor = lazy(() => import("./AppInputSchemaEditor"));
+const AppStepCard = lazy(() => import("./AppStepCard"));
+const TextFieldWithVars = lazy(() => import("./TextFieldWithVars"));
 
 export function AppConfigEditor({
   appType,

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

@@ -26,7 +26,7 @@ const dataTypes = [
   "multi",
 ];
 
-export function AppInputSchemaEditor({
+export default function AppInputSchemaEditor({
   fields,
   setFields,
   readOnly = false,

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

@@ -1,10 +1,11 @@
 import WebTwoToneIcon from "@mui/icons-material/WebTwoTone";
 import { CardContent } from "@mui/material";
 import TextField from "@mui/material/TextField";
-import { useEffect, useState } from "react";
+import { lazy, useEffect, useState } from "react";
 import { useValidationErrorsForAppComponents } from "../../data/appValidation";
-import { AppStepCard } from "./AppStepCard";
-import { TextFieldWithVars } from "./TextFieldWithVars";
+
+const AppStepCard = lazy(() => import("./AppStepCard"));
+const TextFieldWithVars = lazy(() => import("./TextFieldWithVars"));
 
 export function AppOutputEditor({
   index,

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

@@ -9,7 +9,7 @@ import {
 import { useState } from "react";
 import { ProviderIcon } from "./ProviderIcon";
 
-export function AppStepCard({
+export default function AppStepCard({
   icon,
   title,
   description,

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

@@ -8,15 +8,16 @@ import {
   Typography,
 } from "@mui/material";
 import validator from "@rjsf/validator-ajv8";
-import { useEffect, useState } from "react";
+import { lazy, useEffect, useState } from "react";
 import { useRecoilValue } from "recoil";
 import { useValidationErrorsForAppComponents } from "../../data/appValidation";
 import { appsState } from "../../data/atoms";
-import ThemedJsonForm from "../ThemedJsonForm";
 import "./AppEditor.css";
-import { AppSelector } from "./AppSelector";
-import { AppStepCard } from "./AppStepCard";
-import { TextFieldWithVars } from "./TextFieldWithVars";
+
+const ThemedJsonForm = lazy(() => import("../ThemedJsonForm"));
+const AppSelector = lazy(() => import("./AppSelector"));
+const AppStepCard = lazy(() => import("./AppStepCard"));
+const TextFieldWithVars = lazy(() => import("./TextFieldWithVars"));
 
 function PromptlyAppStepCard({
   appId,

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

@@ -208,7 +208,7 @@ const generateTreeItemsFromSchema = (
   return [treeItems, currentKeys];
 };
 
-export function TextFieldWithVars(props) {
+export default function TextFieldWithVars(props) {
   const { value, onChange } = props;
   const [treeViewVisible, setTreeViewVisible] = useState(false);
   const [textFocus, setTextFocus] = useState(false);

llmstack/client/src/components/apps/lexical/LexicalRenderer.jsx

@@ -1,7 +1,7 @@
 import { ReactMarkdown } from "react-markdown/lib/react-markdown";
 import "./LexicalEditor.css";
 
-export function LexicalRenderer({ text }) {
+export default function LexicalRenderer({ text }) {
   const domParser = new DOMParser();
   const doc = domParser.parseFromString(text, "text/html");
 

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

@@ -1,5 +1,6 @@
 import {
   forwardRef,
+  lazy,
   memo,
   useCallback,
   useEffect,
@@ -45,8 +46,6 @@ import { HeyGenRealtimeAvatar } from "../HeyGenRealtimeAvatar";
 import { PDFViewer } from "../DocViewer";
 import { RemoteBrowserEmbed } from "../../connections/RemoteBrowser";
 import { appRunDataState, profileSelector } from "../../../data/atoms";
-import { LexicalRenderer } from "../lexical/LexicalRenderer";
-import ThemedJsonForm from "../../ThemedJsonForm";
 import loadingImage from "../../../assets/images/loading.gif";
 import { isEqual, get } from "lodash";
 
@@ -58,6 +57,9 @@ import "ace-builds/src-noconflict/mode-html";
 import "ace-builds/src-noconflict/theme-dracula";
 import "./LayoutRenderer.css";
 
+const LexicalRenderer = lazy(() => import("../lexical/LexicalRenderer"));
+const ThemedJsonForm = lazy(() => import("../../ThemedJsonForm"));
+
 const liquidEngine = new Liquid();
 
 const AppMessageToolbar = ({ message }) => {

llmstack/client/src/components/datasource/DataSourceSelector.jsx

@@ -7,7 +7,7 @@ import { dataSourcesState, orgDataSourcesState } from "../../data/atoms";
 import { AddDataSourceModal } from "./AddDataSourceModal";
 import WithLogin from "../WithLogin";
 
-export function DataSourceSelector(props) {
+export default function DataSourceSelector(props) {
   const dataSources = useRecoilValue(dataSourcesState);
   const orgDataSources = useRecoilValue(orgDataSourcesState);
   const [showAddDataSourceModal, setShowAddDataSourceModal] = useState(false);