FE: Split big chunks (#210)

Co-authored-by: Roman Zabaluev <[email protected]>

frontend/src/components/App.tsx

@@ -8,25 +8,28 @@ import {
   clusterNewConfigPath,
 } from 'lib/paths';
 import PageLoader from 'components/common/PageLoader/PageLoader';
-import Dashboard from 'components/Dashboard/Dashboard';
-import ClusterPage from 'components/ClusterPage/ClusterPage';
 import { ThemeProvider } from 'styled-components';
 import { theme, darkTheme } from 'theme/theme';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { showServerError } from 'lib/errorHandling';
 import { Toaster } from 'react-hot-toast';
 import GlobalCSS from 'components/globalCss';
 import * as S from 'components/App.styled';
-import ClusterConfigForm from 'widgets/ClusterConfigForm';
 import { ThemeModeContext } from 'components/contexts/ThemeModeContext';
 
 import ConfirmationModal from './common/ConfirmationModal/ConfirmationModal';
 import { ConfirmContextProvider } from './contexts/ConfirmContext';
 import { GlobalSettingsProvider } from './contexts/GlobalSettingsContext';
-import ErrorPage from './ErrorPage/ErrorPage';
 import { UserInfoRolesAccessProvider } from './contexts/UserInfoRolesAccessContext';
 import PageContainer from './PageContainer/PageContainer';
 
+const Dashboard = React.lazy(() => import('components/Dashboard/Dashboard'));
+const ClusterPage = React.lazy(
+  () => import('components/ClusterPage/ClusterPage')
+);
+const ClusterConfigForm = React.lazy(() => import('widgets/ClusterConfigForm'));
+const ErrorPage = React.lazy(() => import('components/ErrorPage/ErrorPage'));
+
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {

frontend/src/components/Topics/Topics.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import { Route, Routes } from 'react-router-dom';
+import PageLoader from 'components/common/PageLoader/PageLoader';
 import {
   clusterTopicCopyRelativePath,
   clusterTopicNewRelativePath,
@@ -8,24 +9,26 @@ import {
 } from 'lib/paths';
 import SuspenseQueryComponent from 'components/common/SuspenseQueryComponent/SuspenseQueryComponent';
 
-import New from './New/New';
-import ListPage from './List/ListPage';
-import Topic from './Topic/Topic';
+const New = React.lazy(() => import('./New/New'));
+const ListPage = React.lazy(() => import('./List/ListPage'));
+const Topic = React.lazy(() => import('./Topic/Topic'));
 
 const Topics: React.FC = () => (
-  <Routes>
-    <Route index element={<ListPage />} />
-    <Route path={clusterTopicNewRelativePath} element={<New />} />
-    <Route path={clusterTopicCopyRelativePath} element={<New />} />
-    <Route
-      path={getNonExactPath(RouteParams.topicName)}
-      element={
-        <SuspenseQueryComponent>
-          <Topic />
-        </SuspenseQueryComponent>
-      }
-    />
-  </Routes>
+  <Suspense fallback={<PageLoader />}>
+    <Routes>
+      <Route index element={<ListPage />} />
+      <Route path={clusterTopicNewRelativePath} element={<New />} />
+      <Route path={clusterTopicCopyRelativePath} element={<New />} />
+      <Route
+        path={getNonExactPath(RouteParams.topicName)}
+        element={
+          <SuspenseQueryComponent>
+            <Topic />
+          </SuspenseQueryComponent>
+        }
+      />
+    </Routes>
+  </Suspense>
 );
 
 export default Topics;

frontend/src/components/Topics/__tests__/Topics.spec.tsx

@@ -35,23 +35,23 @@ describe('Topics Component', () => {
       { initialEntries: [path] }
     );
 
-  it('should check if the page is Topics List rendered', () => {
+  it('should check if the page is Topics List rendered', async () => {
     setUpComponent(clusterTopicsPath(clusterName));
-    expect(screen.getByText(listContainer)).toBeInTheDocument();
+    expect(await screen.findByText(listContainer)).toBeInTheDocument();
   });
 
-  it('should check if the page is  New Topic  rendered', () => {
+  it('should check if the page is  New Topic  rendered', async () => {
     setUpComponent(clusterTopicNewPath(clusterName));
-    expect(screen.getByText(newCopyContainer)).toBeInTheDocument();
+    expect(await screen.findByText(newCopyContainer)).toBeInTheDocument();
   });
 
   it('should check if the page is Copy Topic rendered', () => {
     setUpComponent(clusterTopicCopyPath(clusterName));
     expect(screen.getByText(newCopyContainer)).toBeInTheDocument();
   });
 
-  it('should check if the page is Topic page rendered', () => {
+  it('should check if the page is Topic page rendered', async () => {
     setUpComponent(clusterTopicPath(clusterName, topicName));
-    expect(screen.getByText(topicContainer)).toBeInTheDocument();
+    expect(await screen.findByText(topicContainer)).toBeInTheDocument();
   });
 });

frontend/src/components/__tests__/App.spec.tsx

@@ -33,7 +33,7 @@ describe('App', () => {
   });
 
   it('Renders navigation', async () => {
-    expect(screen.getByText('Navigation')).toBeInTheDocument();
+    expect(await screen.findByText('Navigation')).toBeInTheDocument();
   });
 
   it('Renders NavBar', async () => {