[8.x] [Kibana Overview] Shift SCSS import and lazy-load main component (

#204661) (#205484)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Kibana Overview] Shift SCSS import and lazy-load main component
(#204661)](#204661)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Tim
Sullivan","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-12-19T15:10:02Z","message":"[Kibana
Overview] Shift SCSS import and lazy-load main component (#204661)\n\n##
Summary\r\n\r\nPart of
https://github.com/elastic/kibana-team/issues/1082\r\n\r\nThe purpose of
this PR is to reduce the page load bundle size of
the\r\n`kibanaOverview` plugin.\r\n\r\nConverts the main component of
the `kibanaOverview` plugin to be lazy\r\nloaded, and shifts the import
of the main SCSS file to be imported from\r\nthe lazily-loaded
component. This PR does not include any changes that\r\nwould be
noticeable by end-users. It changes the internals to use a\r\ndifferent
technology for styling components.\r\n\r\n## References\r\n1.
https://emotion.sh/docs/globals\r\n2.
https://emotion.sh/docs/best-practices\r\n3.\r\nhttps://github.com/elastic/eui/discussions/6828#discussioncomment-10825360","sha":"1861bbc16a92afd1a2bb88521bb2110746079efd","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","backport:prev-minor"],"title":"[Kibana
Overview] Shift SCSS import and lazy-load main
component","number":204661,"url":"https://github.com/elastic/kibana/pull/204661","mergeCommit":{"message":"[Kibana
Overview] Shift SCSS import and lazy-load main component (#204661)\n\n##
Summary\r\n\r\nPart of
https://github.com/elastic/kibana-team/issues/1082\r\n\r\nThe purpose of
this PR is to reduce the page load bundle size of
the\r\n`kibanaOverview` plugin.\r\n\r\nConverts the main component of
the `kibanaOverview` plugin to be lazy\r\nloaded, and shifts the import
of the main SCSS file to be imported from\r\nthe lazily-loaded
component. This PR does not include any changes that\r\nwould be
noticeable by end-users. It changes the internals to use a\r\ndifferent
technology for styling components.\r\n\r\n## References\r\n1.
https://emotion.sh/docs/globals\r\n2.
https://emotion.sh/docs/best-practices\r\n3.\r\nhttps://github.com/elastic/eui/discussions/6828#discussioncomment-10825360","sha":"1861bbc16a92afd1a2bb88521bb2110746079efd"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/204661","number":204661,"mergeCommit":{"message":"[Kibana
Overview] Shift SCSS import and lazy-load main component (#204661)\n\n##
Summary\r\n\r\nPart of
https://github.com/elastic/kibana-team/issues/1082\r\n\r\nThe purpose of
this PR is to reduce the page load bundle size of
the\r\n`kibanaOverview` plugin.\r\n\r\nConverts the main component of
the `kibanaOverview` plugin to be lazy\r\nloaded, and shifts the import
of the main SCSS file to be imported from\r\nthe lazily-loaded
component. This PR does not include any changes that\r\nwould be
noticeable by end-users. It changes the internals to use a\r\ndifferent
technology for styling components.\r\n\r\n## References\r\n1.
https://emotion.sh/docs/globals\r\n2.
https://emotion.sh/docs/best-practices\r\n3.\r\nhttps://github.com/elastic/eui/discussions/6828#discussioncomment-10825360","sha":"1861bbc16a92afd1a2bb88521bb2110746079efd"}}]}]
BACKPORT-->

Co-authored-by: Tim Sullivan <[email protected]>

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>

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';

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,