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

* Added lazy load.

* Added visualizer and improved hljs import only yaml

* Optimized manualChunks

frontend/src/App.tsx

@@ -5,13 +5,14 @@ import RepositoryPage from "./pages/Repository";
 import Revision from "./pages/Revision";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import type { FC } from "react";
-import { useState } from "react";
+import { useState, lazy } from "react";
 import type { ErrorAlert } from "./context/ErrorModalContext";
 import { ErrorModalContext } from "./context/ErrorModalContext";
 import GlobalErrorModal from "./components/modal/GlobalErrorModal";
 import { AppContextProvider } from "./context/AppContext";
 import apiService from "./API/apiService";
-import DocsPage from "./pages/DocsPage";
+
+const DocsPage = lazy(() => import("./pages/DocsPage"));
 
 const queryClient = new QueryClient({
   defaultOptions: {

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;

frontend/src/components/revision/RevisionDetails.tsx

@@ -45,12 +45,12 @@ type RevisionDetailsProps = {
   latestRevision: number;
 };
 
-export default function RevisionDetails({
+const RevisionDetails = ({
   release,
   installedRevision,
   isLatest,
   latestRevision,
-}: RevisionDetailsProps) {
+}: RevisionDetailsProps) => {
   const [searchParams] = useSearchParams();
 
   const revisionTabs = [
@@ -307,7 +307,7 @@ export default function RevisionDetails({
       <Tabs tabs={revisionTabs} selectedTab={selectedTab} />
     </div>
   );
-}
+};
 
 function RevisionTag({ caption, text }: RevisionTagProps) {
   return (
@@ -534,3 +534,5 @@ const Uninstall = () => {
     </>
   );
 };
+
+export default RevisionDetails;

frontend/src/components/revision/RevisionDiff.tsx

@@ -4,13 +4,14 @@ import { Diff2HtmlUI } from "diff2html/lib/ui/js/diff2html-ui-slim.js";
 import { useGetReleaseInfoByType } from "../../API/releases";
 import { useParams } from "react-router";
 import useCustomSearchParams from "../../hooks/useCustomSearchParams";
-
 import parse from "html-react-parser";
-
-import hljs from "highlight.js";
+import hljs from "highlight.js/lib/core";
+import yaml from "highlight.js/lib/languages/yaml";
 import Spinner from "../Spinner";
 import { diffConfiguration } from "../../utils";
 
+hljs.registerLanguage("yaml", yaml);
+
 type RevisionDiffProps = {
   includeUserDefineOnly?: boolean;
   latestRevision: number;

frontend/src/components/revision/RevisionResource.tsx

@@ -1,6 +1,7 @@
 import { useMemo, useState } from "react";
 import { useParams } from "react-router";
-import hljs from "highlight.js";
+import hljs from "highlight.js/lib/core";
+import yaml from "highlight.js/lib/languages/yaml";
 import { RiExternalLinkLine } from "react-icons/ri";
 
 import type { StructuredResources } from "../../API/releases";
@@ -15,6 +16,8 @@ import Badge, { getBadgeType } from "../Badge";
 import Spinner from "../Spinner";
 import { Troubleshoot } from "../Troubleshoot";
 
+hljs.registerLanguage("yaml", yaml);
+
 interface Props {
   isLatest: boolean;
 }

frontend/src/pages/Revision.tsx

@@ -1,12 +1,15 @@
-import { useMemo } from "react";
+import { useMemo, Suspense, lazy } from "react";
 import { useParams } from "react-router";
-import RevisionDetails from "../components/revision/RevisionDetails";
 import RevisionsList from "../components/revision/RevisionsList";
 import type { ReleaseRevision } from "../data/types";
 import { useQuery } from "@tanstack/react-query";
 import apiService from "../API/apiService";
 import Spinner from "../components/Spinner";
 
+const RevisionDetails = lazy(
+  () => import("../components/revision/RevisionDetails")
+);
+
 const descendingSort = (r1: ReleaseRevision, r2: ReleaseRevision) =>
   r1.revision - r2.revision < 0 ? 1 : -1;
 
@@ -62,12 +65,14 @@ function Revision() {
             <Spinner />
           </div>
         ) : selectedRelease ? (
-          <RevisionDetails
-            release={selectedRelease} // TODO fix it
-            installedRevision={releaseRevisions?.[0]}
-            isLatest={selectedRelease.revision === latestRevision}
-            latestRevision={latestRevision}
-          />
+          <Suspense fallback={<Spinner />}>
+            <RevisionDetails
+              release={selectedRelease} // TODO fix it
+              installedRevision={releaseRevisions?.[0]}
+              isLatest={selectedRelease.revision === latestRevision}
+              latestRevision={latestRevision}
+            />
+          </Suspense>
         ) : null}
       </div>
     </div>