Reduce bundle size and changes to langflow method

Author: Kabilan-16

src/frontend/src/App.tsx

@@ -1,3 +1,4 @@
+import "@xyflow/react/dist/style.css";
 import { Suspense, useEffect } from "react";
 import { RouterProvider } from "react-router-dom";
 import { LoadingPage } from "./pages/LoadingPage";
@@ -12,7 +13,6 @@ export default function App() {
     } else {
       document.getElementById("body")!.classList.add("dark");
     }
-    import("@xyflow/react/dist/style.css").catch(console.error);
   }, [dark]);
   return (
     <Suspense fallback={<LoadingPage />}>

src/frontend/src/CustomNodes/helpers/check-lucide-icons.ts

@@ -1,13 +1,6 @@
+import dynamicIconImports from "lucide-react/dynamicIconImports";
 import { categoryIcons } from "@/utils/styleUtils";
 
-export const checkLucideIcons =async (iconName: string):Promise<boolean> => {
-   const [lucideIcons, dynamicIconImports] = await Promise.all([
-    import("lucide-react"),
-    import("lucide-react/dynamicIconImports").then((mod) => mod.default),
-  ]);
-  return (
-    !!lucideIcons[iconName] ||
-    !!dynamicIconImports[iconName] ||
-    !!categoryIcons[iconName]
-  );
+export const checkLucideIcons = (iconName: string): boolean => {
+  return !!dynamicIconImports[iconName] || !!categoryIcons[iconName];
 };

src/frontend/src/components/core/jsonEditor/index.tsx

@@ -1,11 +1,11 @@
 import { jsonquery } from "@jsonquerylang/jsonquery";
 import { type KeyboardEvent, useEffect, useRef, useState } from "react";
-import type {
-  Content,
+import {
+  type Content,
   createJSONEditor,
-  MenuItem,
-  Mode,
-  JsonEditor as VanillaJsonEditor,
+  type MenuItem,
+  type Mode,
+  type JsonEditor as VanillaJsonEditor,
 } from "vanilla-jsoneditor";
 import useAlertStore from "../../../stores/alertStore";
 import { cn } from "../../../utils/utils";

src/frontend/src/components/core/jsonEditor/menuUtils.ts

@@ -1,5 +1,5 @@
 import { faCopy } from "@fortawesome/free-solid-svg-icons";
-import type { MenuItem, Mode } from "vanilla-jsoneditor";
+import { type MenuItem, Mode } from "vanilla-jsoneditor";
 
 export const filterTextModeItems = (items: MenuItem[]): MenuItem[] => {
   return items.filter((item) => {

src/frontend/src/pages/AppWrapperPage/components/AuthenticatedAppWrapper.tsx

@@ -1,25 +1,33 @@
-import { Suspense, lazy } from "react";
-import { LoadingPage } from "../LoadingPage";
-import { useLocation } from "react-router-dom";
-import Landing from "../LandingPage";
+import { ErrorBoundary } from "react-error-boundary";
+import { Outlet } from "react-router-dom";
+import AlertDisplayArea from "@/alerts/displayArea";
+import CrashErrorComponent from "@/components/common/crashErrorComponent";
+import { GenericErrorComponent } from "./components/GenericErrorComponent";
+import { useHealthCheck } from "./hooks/use-health-check";
 
-const AuthenticatedAppWrapper = lazy(() =>
-  import("./components/AuthenticatedAppWrapper").then((module) => ({
-    default: module.AuthenticatedAppWrapper,
-  })),
-);
 export function AppWrapperPage() {
-  const { pathname } = useLocation();
-
-  // Render the marketing landing page when visitor hits the root route
-  // regardless of authentication status
-  if (pathname === "/") {
-    return <Landing />;
-  }
+  const { healthCheckTimeout, fetchingHealth, refetch } = useHealthCheck();
 
   return (
-    <Suspense fallback={<LoadingPage />}>
-      <AuthenticatedAppWrapper />
-    </Suspense>
+    <div className="flex h-full w-full flex-col">
+      <ErrorBoundary
+        onReset={() => {
+          // any reset function
+        }}
+        FallbackComponent={CrashErrorComponent}
+      >
+        <>
+          <GenericErrorComponent
+            healthCheckTimeout={healthCheckTimeout}
+            fetching={fetchingHealth}
+            retry={refetch}
+          />
+          <Outlet />
+        </>
+      </ErrorBoundary>
+      <div className="app-div">
+        <AlertDisplayArea />
+      </div>
+    </div>
   );
 }

src/frontend/src/pages/AppWrapperPage/index.tsx

@@ -1,4 +1,5 @@
 import { TwitterLogoIcon } from "@radix-ui/react-icons";
+import dynamicIconImports from "lucide-react/dynamicIconImports";
 import { lazy } from "react";
 import { FaApple, FaDiscord, FaGithub } from "react-icons/fa";
 import { ENABLE_KNOWLEDGE_BASES } from "@/customization/feature-flags";
@@ -8,13 +9,6 @@ import { GradientSave } from "@/icons/GradientSparkles";
 
 const iconCache = new Map<string, any>();
 
-let lucideMapCache: Record<string, any> | null = null;
-const getDynamicIconImports = async (): Promise<Record<string, any>> => {
-  if (!lucideMapCache) {
-    lucideMapCache = (await import("lucide-react/dynamicIconImports")).default;
-  }
-  return lucideMapCache;
-};
 export const BG_NOISE =
   "url(data:image/png;base64,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)";
 
@@ -564,7 +558,6 @@ export const getNodeIcon = async (name: string) => {
     return cacheAndReturn(lazy(iconMappings[iconName || name]));
   }
 
-  const dynamicIconImports = await getDynamicIconImports();
   const lucideIconName = getLucideIconName(iconName || name);
   if (dynamicIconImports[lucideIconName]) {
     try {
@@ -587,7 +580,6 @@ export const getNodeIcon = async (name: string) => {
 export const iconExists = async (name: string): Promise<boolean> => {
   const iconName = nodeIconToDisplayIconMap[name] || name;
   const iconMappings = await iconMappingsPromise;
-  const dynamicIconImports = await getDynamicIconImports();
 
   return !!(
     eagerLoadedIconsMap[iconName] ||

src/frontend/src/utils/styleUtils.ts

@@ -4,6 +4,7 @@ import useAlertStore from "@/stores/alertStore";
 import { ColDef, ColGroupDef, ValueParserParams } from "ag-grid-community";
 import clsx, { ClassValue } from "clsx";
 import { type ColumnField, FormatterType } from "@/types/utils/functions";
+import "moment-timezone";
 import type { Cookies } from "react-cookie";
 import { twMerge } from "tailwind-merge";
 import {