feat: lazy loading (#659)

Co-authored-by: M. Allen Jeffrey <[email protected]>

components/ResultView.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { lazy, Suspense } from "react";
 
 import {
   red,
@@ -17,7 +17,7 @@ import {
 import { SearchResult } from "@elastic/search-ui";
 import { htmlToText } from "html-to-text";
 
-import ResultViewGrid from "./ResultViewGrid";
+const LazyResultViewGrid = lazy(() => import("./ResultViewGrid"));
 
 // Performs intelligent snippet truncation by removing leading/trailing periods and
 // whitespace, and filling with ellipsis accordingly.
@@ -161,7 +161,11 @@ const ResultView = ({ result }: { result: SearchResult }) => {
     thumbnailImageUrl,
   };
 
-  return <ResultViewGrid displayResult={displayResult} />;
+  return (
+    <Suspense fallback={null}>
+      <LazyResultViewGrid displayResult={displayResult} />
+    </Suspense>
+  );
 };
 
 export default ResultView;

components/ResultViewGrid.tsx

@@ -1,8 +1,8 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, lazy, Suspense } from "react";
 import { Modal, Button, CardActionArea } from "@mui/material";
 
 import type { DisplayResult } from "./ResultView";
-import ResultViewList from "./ResultViewList";
+const LazyResultViewList = lazy(() => import("./ResultViewList"));
 
 import Card from "@mui/material/Card";
 import CardActions from "@mui/material/CardActions";
@@ -128,7 +128,12 @@ const ResultViewGrid = ({
           overflow: "auto",
         }}
       >
-        <ResultViewList displayResult={displayResult} isShowReadMore={false} />
+        <Suspense fallback={null}>
+          <LazyResultViewList
+            displayResult={displayResult}
+            isShowReadMore={false}
+          />
+        </Suspense>
       </Modal>
     </Card>
   );