Skip to content

Commit 78d308a

Browse files
NilumilakHaarolean
andauthored
FE: Split big chunks (#210)
Co-authored-by: Roman Zabaluev <gpg@haarolean.dev>
1 parent d868b7e commit 78d308a

File tree

4 files changed

+34
-28
lines changed

4 files changed

+34
-28
lines changed

frontend/src/components/App.tsx

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,25 +8,28 @@ import {
88
clusterNewConfigPath,
99
} from 'lib/paths';
1010
import PageLoader from 'components/common/PageLoader/PageLoader';
11-
import Dashboard from 'components/Dashboard/Dashboard';
12-
import ClusterPage from 'components/ClusterPage/ClusterPage';
1311
import { ThemeProvider } from 'styled-components';
1412
import { theme, darkTheme } from 'theme/theme';
1513
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
1614
import { showServerError } from 'lib/errorHandling';
1715
import { Toaster } from 'react-hot-toast';
1816
import GlobalCSS from 'components/globalCss';
1917
import * as S from 'components/App.styled';
20-
import ClusterConfigForm from 'widgets/ClusterConfigForm';
2118
import { ThemeModeContext } from 'components/contexts/ThemeModeContext';
2219

2320
import ConfirmationModal from './common/ConfirmationModal/ConfirmationModal';
2421
import { ConfirmContextProvider } from './contexts/ConfirmContext';
2522
import { GlobalSettingsProvider } from './contexts/GlobalSettingsContext';
26-
import ErrorPage from './ErrorPage/ErrorPage';
2723
import { UserInfoRolesAccessProvider } from './contexts/UserInfoRolesAccessContext';
2824
import PageContainer from './PageContainer/PageContainer';
2925

26+
const Dashboard = React.lazy(() => import('components/Dashboard/Dashboard'));
27+
const ClusterPage = React.lazy(
28+
() => import('components/ClusterPage/ClusterPage')
29+
);
30+
const ClusterConfigForm = React.lazy(() => import('widgets/ClusterConfigForm'));
31+
const ErrorPage = React.lazy(() => import('components/ErrorPage/ErrorPage'));
32+
3033
const queryClient = new QueryClient({
3134
defaultOptions: {
3235
queries: {
Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import React from 'react';
1+
import React, { Suspense } from 'react';
22
import { Route, Routes } from 'react-router-dom';
3+
import PageLoader from 'components/common/PageLoader/PageLoader';
34
import {
45
clusterTopicCopyRelativePath,
56
clusterTopicNewRelativePath,
@@ -8,24 +9,26 @@ import {
89
} from 'lib/paths';
910
import SuspenseQueryComponent from 'components/common/SuspenseQueryComponent/SuspenseQueryComponent';
1011

11-
import New from './New/New';
12-
import ListPage from './List/ListPage';
13-
import Topic from './Topic/Topic';
12+
const New = React.lazy(() => import('./New/New'));
13+
const ListPage = React.lazy(() => import('./List/ListPage'));
14+
const Topic = React.lazy(() => import('./Topic/Topic'));
1415

1516
const Topics: React.FC = () => (
16-
<Routes>
17-
<Route index element={<ListPage />} />
18-
<Route path={clusterTopicNewRelativePath} element={<New />} />
19-
<Route path={clusterTopicCopyRelativePath} element={<New />} />
20-
<Route
21-
path={getNonExactPath(RouteParams.topicName)}
22-
element={
23-
<SuspenseQueryComponent>
24-
<Topic />
25-
</SuspenseQueryComponent>
26-
}
27-
/>
28-
</Routes>
17+
<Suspense fallback={<PageLoader />}>
18+
<Routes>
19+
<Route index element={<ListPage />} />
20+
<Route path={clusterTopicNewRelativePath} element={<New />} />
21+
<Route path={clusterTopicCopyRelativePath} element={<New />} />
22+
<Route
23+
path={getNonExactPath(RouteParams.topicName)}
24+
element={
25+
<SuspenseQueryComponent>
26+
<Topic />
27+
</SuspenseQueryComponent>
28+
}
29+
/>
30+
</Routes>
31+
</Suspense>
2932
);
3033

3134
export default Topics;

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -35,23 +35,23 @@ describe('Topics Component', () => {
3535
{ initialEntries: [path] }
3636
);
3737

38-
it('should check if the page is Topics List rendered', () => {
38+
it('should check if the page is Topics List rendered', async () => {
3939
setUpComponent(clusterTopicsPath(clusterName));
40-
expect(screen.getByText(listContainer)).toBeInTheDocument();
40+
expect(await screen.findByText(listContainer)).toBeInTheDocument();
4141
});
4242

43-
it('should check if the page is New Topic rendered', () => {
43+
it('should check if the page is New Topic rendered', async () => {
4444
setUpComponent(clusterTopicNewPath(clusterName));
45-
expect(screen.getByText(newCopyContainer)).toBeInTheDocument();
45+
expect(await screen.findByText(newCopyContainer)).toBeInTheDocument();
4646
});
4747

4848
it('should check if the page is Copy Topic rendered', () => {
4949
setUpComponent(clusterTopicCopyPath(clusterName));
5050
expect(screen.getByText(newCopyContainer)).toBeInTheDocument();
5151
});
5252

53-
it('should check if the page is Topic page rendered', () => {
53+
it('should check if the page is Topic page rendered', async () => {
5454
setUpComponent(clusterTopicPath(clusterName, topicName));
55-
expect(screen.getByText(topicContainer)).toBeInTheDocument();
55+
expect(await screen.findByText(topicContainer)).toBeInTheDocument();
5656
});
5757
});

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ describe('App', () => {
3333
});
3434

3535
it('Renders navigation', async () => {
36-
expect(screen.getByText('Navigation')).toBeInTheDocument();
36+
expect(await screen.findByText('Navigation')).toBeInTheDocument();
3737
});
3838

3939
it('Renders NavBar', async () => {

0 commit comments

Comments
 (0)