Added lazy load, visualizer and optimized bundle chunks (#635)

* Added lazy load.

* Added visualizer and improved hljs import only yaml

* Optimized manualChunks

frontend/src/components/modal/InstallChartModal/ChartValues.tsx

@@ -1,5 +1,8 @@
-import hljs from "highlight.js";
+import hljs from "highlight.js/lib/core";
 import Spinner from "../../Spinner";
+import yaml from "highlight.js/lib/languages/yaml";
+
+hljs.registerLanguage("yaml", yaml);
 
 export const ChartValues = ({
   chartValues,

frontend/src/components/modal/InstallChartModal/DefinedValues.tsx

@@ -8,7 +8,7 @@ interface DefinedValuesProps {
   loading: boolean;
 }
 
-export const DefinedValues = ({
+const DefinedValues = ({
   initialValue,
   chartValues,
   onUserValuesChange,
@@ -24,3 +24,5 @@ export const DefinedValues = ({
     </div>
   );
 };
+
+export default DefinedValues;

frontend/src/components/modal/InstallChartModal/InstallReleaseChartModal.tsx

@@ -1,5 +1,12 @@
 import { useParams } from "react-router";
-import { useEffect, useEffectEvent, useMemo, useState } from "react";
+import {
+  useEffect,
+  useEffectEvent,
+  useMemo,
+  useState,
+  lazy,
+  Suspense,
+} from "react";
 import type { VersionData } from "../../../API/releases";
 import {
   useChartReleaseValues,
@@ -9,7 +16,6 @@ import {
 } from "../../../API/releases";
 import Modal, { ModalButtonStyle } from "../Modal";
 import { GeneralDetails } from "./GeneralDetails";
-import { ManifestDiff } from "./ManifestDiff";
 import { useMutation } from "@tanstack/react-query";
 import useNavigateWithSearchParams from "../../../hooks/useNavigateWithSearchParams";
 import { VersionToInstall } from "./VersionToInstall";
@@ -18,10 +24,13 @@ import useCustomSearchParams from "../../../hooks/useCustomSearchParams";
 import { useChartRepoValues } from "../../../API/repositories";
 import { useDiffData } from "../../../API/shared";
 import type { InstallChartModalProps } from "../../../data/types";
-import { DefinedValues } from "./DefinedValues";
 import apiService from "../../../API/apiService";
 import { InstallUpgradeTitle } from "./InstallUpgradeTitle";
 import type { LatestChartVersion } from "../../../API/interfaces";
+import Spinner from "../../Spinner";
+
+const DefinedValues = lazy(() => import("./DefinedValues"));
+const ManifestDiff = lazy(() => import("./ManifestDiff"));
 
 export const InstallReleaseChartModal = ({
   isOpen,
@@ -222,24 +231,28 @@ export const InstallReleaseChartModal = ({
         onNamespaceInput={setNamespace}
       />
 
-      <DefinedValues
-        initialValue={releaseValues}
-        onUserValuesChange={(values: string) => setUserValues(values)}
-        chartValues={chartValues}
-        loading={loadingReleaseValues}
-      />
+      <Suspense fallback={<Spinner />}>
+        <DefinedValues
+          initialValue={releaseValues}
+          onUserValuesChange={(values: string) => setUserValues(values)}
+          chartValues={chartValues}
+          loading={loadingReleaseValues}
+        />
+      </Suspense>
 
-      <ManifestDiff
-        diff={diffData as string}
-        isLoading={isLoadingDiff}
-        error={
-          (currentVerManifestError as unknown as string) || // TODO fix it
-          (selectedVerDataError as unknown as string) ||
-          (diffError as unknown as string) ||
-          installError ||
-          (versionsError as unknown as string)
-        }
-      />
+      <Suspense fallback={<Spinner />}>
+        <ManifestDiff
+          diff={diffData as string}
+          isLoading={isLoadingDiff}
+          error={
+            (currentVerManifestError as unknown as string) || // TODO fix it
+            (selectedVerDataError as unknown as string) ||
+            (diffError as unknown as string) ||
+            installError ||
+            (versionsError as unknown as string)
+          }
+        />
+      </Suspense>
     </Modal>
   );
 };

frontend/src/components/modal/InstallChartModal/InstallRepoChartModal.tsx

@@ -1,9 +1,15 @@
 import { useParams } from "react-router";
-import { useEffect, useEffectEvent, useMemo, useState } from "react";
+import {
+  lazy,
+  Suspense,
+  useEffect,
+  useEffectEvent,
+  useMemo,
+  useState,
+} from "react";
 import { useGetVersions, useVersionData } from "../../../API/releases";
 import Modal, { ModalButtonStyle } from "../Modal";
 import { GeneralDetails } from "./GeneralDetails";
-import { ManifestDiff } from "./ManifestDiff";
 import { useMutation } from "@tanstack/react-query";
 import { useChartRepoValues } from "../../../API/repositories";
 import useNavigateWithSearchParams from "../../../hooks/useNavigateWithSearchParams";
@@ -11,10 +17,13 @@ import { VersionToInstall } from "./VersionToInstall";
 import { isNoneEmptyArray } from "../../../utils";
 import { useDiffData } from "../../../API/shared";
 import type { InstallChartModalProps } from "../../../data/types";
-import { DefinedValues } from "./DefinedValues";
 import apiService from "../../../API/apiService";
 import { InstallUpgradeTitle } from "./InstallUpgradeTitle";
 import type { LatestChartVersion } from "../../../API/interfaces";
+import Spinner from "../../Spinner";
+
+const DefinedValues = lazy(() => import("./DefinedValues"));
+const ManifestDiff = lazy(() => import("./ManifestDiff"));
 
 export const InstallRepoChartModal = ({
   isOpen,
@@ -107,7 +116,7 @@ export const InstallRepoChartModal = ({
   } = useDiffData({
     selectedRepo: selectedRepo || "",
     versionsError: versionsError as unknown as string, // TODO fix it
-    currentVerManifest: "", // current version manifest should always be empty since its a fresh install
+    currentVerManifest: "", // current version manifest should always be empty since it's a fresh install
     selectedVerData,
     chart: chartAddress,
   });
@@ -208,16 +217,18 @@ export const InstallRepoChartModal = ({
         loading={loadingChartValues}
       />
 
-      <ManifestDiff
-        diff={diffData as string}
-        isLoading={isLoadingDiff}
-        error={
-          (selectedVerDataError as unknown as string) || // TODO fix it
-          (diffError as unknown as string) ||
-          installError ||
-          (versionsError as unknown as string)
-        }
-      />
+      <Suspense fallback={<Spinner />}>
+        <ManifestDiff
+          diff={diffData as string}
+          isLoading={isLoadingDiff}
+          error={
+            (selectedVerDataError as unknown as string) || // TODO fix it
+            (diffError as unknown as string) ||
+            installError ||
+            (versionsError as unknown as string)
+          }
+        />
+      </Suspense>
     </Modal>
   );
 };

frontend/src/components/modal/InstallChartModal/ManifestDiff.tsx

@@ -1,17 +1,20 @@
 import { Diff2HtmlUI } from "diff2html/lib/ui/js/diff2html-ui-base";
-import hljs from "highlight.js";
+import hljs from "highlight.js/lib/core";
+import yaml from "highlight.js/lib/languages/yaml";
 
 import { useEffect, useRef } from "react";
 import Spinner from "../../Spinner";
 import { diffConfiguration } from "../../../utils";
 
+hljs.registerLanguage("yaml", yaml);
+
 interface ManifestDiffProps {
   diff?: string;
   isLoading: boolean;
   error: string;
 }
 
-export const ManifestDiff = ({ diff, isLoading, error }: ManifestDiffProps) => {
+const ManifestDiff = ({ diff, isLoading, error }: ManifestDiffProps) => {
   const diffContainerRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
@@ -63,3 +66,5 @@ export const ManifestDiff = ({ diff, isLoading, error }: ManifestDiffProps) => {
     </div>
   );
 };
+
+export default ManifestDiff;