From 1861bbc16a92afd1a2bb88521bb2110746079efd Mon Sep 17 00:00:00 2001
From: Tim Sullivan <tsullivan@users.noreply.github.com>
Date: Thu, 19 Dec 2024 08:10:02 -0700
Subject: [PATCH] [Kibana Overview] Shift SCSS import and lazy-load main
 component (#204661)

## Summary

Part of https://github.com/elastic/kibana-team/issues/1082

The purpose of this PR is to reduce the page load bundle size of the
`kibanaOverview` plugin.

Converts the main component of the `kibanaOverview` plugin to be lazy
loaded, and shifts the import of the main SCSS file to be imported from
the lazily-loaded component. This PR does not include any changes that
would be noticeable by end-users. It changes the internals to use a
different technology for styling components.

## References
1. https://emotion.sh/docs/globals
2. https://emotion.sh/docs/best-practices
3.
https://github.com/elastic/eui/discussions/6828#discussioncomment-10825360
---
 .../kibana_overview/public/components/_index.scss      |  1 -
 src/plugins/kibana_overview/public/components/app.tsx  | 10 +++++++++-
 .../{_overview.scss => overview/overview.scss}         |  0
 .../public/components/overview/overview.tsx            |  2 ++
 src/plugins/kibana_overview/public/index.scss          |  1 -
 src/plugins/kibana_overview/public/index.ts            |  2 --
 6 files changed, 11 insertions(+), 5 deletions(-)
 delete mode 100644 src/plugins/kibana_overview/public/components/_index.scss
 rename src/plugins/kibana_overview/public/components/{_overview.scss => overview/overview.scss} (100%)
 delete mode 100644 src/plugins/kibana_overview/public/index.scss

diff --git a/src/plugins/kibana_overview/public/components/_index.scss b/src/plugins/kibana_overview/public/components/_index.scss
deleted file mode 100644
index b8857d171728f..0000000000000
--- a/src/plugins/kibana_overview/public/components/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'overview';
diff --git a/src/plugins/kibana_overview/public/components/app.tsx b/src/plugins/kibana_overview/public/components/app.tsx
index 581356f83d358..50233396f3c48 100644
--- a/src/plugins/kibana_overview/public/components/app.tsx
+++ b/src/plugins/kibana_overview/public/components/app.tsx
@@ -13,11 +13,11 @@ import { I18nProvider } from '@kbn/i18n-react';
 import type { NavigationPublicPluginStart } from '@kbn/navigation-plugin/public';
 import type { FetchResult } from '@kbn/newsfeed-plugin/public';
 import { Route, Routes } from '@kbn/shared-ux-router';
+import { withSuspense } from '@kbn/shared-ux-utility';
 import React, { useEffect, useState } from 'react';
 import { HashRouter as Router } from 'react-router-dom';
 import useObservable from 'react-use/lib/useObservable';
 import type { Observable } from 'rxjs';
-import { Overview } from './overview';
 
 interface KibanaOverviewAppDeps {
   basename: string;
@@ -48,6 +48,14 @@ export const KibanaOverviewApp = ({
     }
   }, [newsfeed$]);
 
+  const Overview = withSuspense(
+    React.lazy(() =>
+      import('./overview').then(({ Overview: OverviewComponent }) => {
+        return { default: OverviewComponent };
+      })
+    )
+  );
+
   return (
     <Router basename={basename}>
       <I18nProvider>
diff --git a/src/plugins/kibana_overview/public/components/_overview.scss b/src/plugins/kibana_overview/public/components/overview/overview.scss
similarity index 100%
rename from src/plugins/kibana_overview/public/components/_overview.scss
rename to src/plugins/kibana_overview/public/components/overview/overview.scss
diff --git a/src/plugins/kibana_overview/public/components/overview/overview.tsx b/src/plugins/kibana_overview/public/components/overview/overview.tsx
index 4d21adeecd377..c4a36e966142b 100644
--- a/src/plugins/kibana_overview/public/components/overview/overview.tsx
+++ b/src/plugins/kibana_overview/public/components/overview/overview.tsx
@@ -7,6 +7,8 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
+import './overview.scss';
+
 import { snakeCase } from 'lodash';
 import React, { FC, useState, useEffect } from 'react';
 import useObservable from 'react-use/lib/useObservable';
diff --git a/src/plugins/kibana_overview/public/index.scss b/src/plugins/kibana_overview/public/index.scss
deleted file mode 100644
index 841415620d691..0000000000000
--- a/src/plugins/kibana_overview/public/index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'components/index';
diff --git a/src/plugins/kibana_overview/public/index.ts b/src/plugins/kibana_overview/public/index.ts
index 5091cd83ae67c..6fb3f0cc4a6e3 100644
--- a/src/plugins/kibana_overview/public/index.ts
+++ b/src/plugins/kibana_overview/public/index.ts
@@ -7,8 +7,6 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import './index.scss';
-
 import { KibanaOverviewPlugin } from './plugin';
 
 // This exports static code and TypeScript types,