Skip to content

Commit 0c03495

Browse files
vanch3dvanch3d
authored
Merge pull request #433
refactor(22362): Improve lazy loading experience with Susepnse * refactor(22362): export the outlet + suspense component * refactor(22362): replace every router's Outlet with the suspense comp… * refactor(22362): reuse component * chore(22362): add quiet to the Cypress runs
1 parent 27eb131 commit 0c03495

File tree

10 files changed

+69
-61
lines changed

10 files changed

+69
-61
lines changed

‎hivemq-edge/src/frontend/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@
1616
"cypress:open": "cypress open",
1717
"cypress:open:component": "cypress open --component --browser chrome",
1818
"cypress:open:e2e": "cypress open --e2e --browser chrome",
19-
"cypress:run:component": "cypress run --component",
20-
"cypress:run:e2e": "cypress run --e2e",
19+
"cypress:run:component": "cypress run -q --component",
20+
"cypress:run:e2e": "cypress run -q --e2e",
2121
"cypress:run": "npx cypress run --e2e --browser chrome && npx cypress run --component --browser chrome",
2222
"cypress:percy": "LOCAL_NONCE=$(date '+%s') && PERCY_PARALLEL_NONCE=$LOCAL_NONCE percy exec --parallel -- cypress run --e2e && PERCY_PARALLEL_NONCE=$LOCAL_NONCE percy exec --parallel -- cypress run --component && PERCY_PARALLEL_NONCE=$LOCAL_NONCE percy build:finalize ",
2323
"test": "vitest",

‎hivemq-edge/src/frontend/src/components/SuspenseOutlet.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { Suspense } from 'react'
2+
import { Outlet } from 'react-router-dom'
3+
import { AbsoluteCenter } from '@chakra-ui/react'
4+
5+
import LoaderSpinner from '@/components/Chakra/LoaderSpinner.tsx'
6+
7+
export const SuspenseFallback = () => {
8+
return (
9+
<AbsoluteCenter axis="both">
10+
<LoaderSpinner />
11+
</AbsoluteCenter>
12+
)
13+
}
14+
15+
const SuspenseOutlet = () => {
16+
return (
17+
<Suspense fallback={<SuspenseFallback />}>
18+
<Outlet />
19+
</Suspense>
20+
)
21+
}
22+
23+
export default SuspenseOutlet

‎hivemq-edge/src/frontend/src/extensions/datahub/components/DataHubPage.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import { FC } from 'react'
22
import { useTranslation } from 'react-i18next'
3-
import { Outlet, useLocation } from 'react-router-dom'
3+
import { useLocation } from 'react-router-dom'
44
import { Box, Flex } from '@chakra-ui/react'
55

66
import PageContainer from '@/components/PageContainer.tsx'
7+
import SuspenseOutlet from '@/components/SuspenseOutlet.tsx'
78
import { CAPABILITY, useGetCapability } from '@/api/hooks/useFrontendServices/useGetCapability.tsx'
89
import LicenseWarning from '@datahub/components/helpers/LicenseWarning.tsx'
910
import DraftCTA from '@datahub/components/helpers/DraftCTA.tsx'
@@ -28,7 +29,7 @@ const DataHubPage: FC = () => {
2829
)
2930
}
3031
>
31-
{hasDataHub && <Outlet />}
32+
{hasDataHub && <SuspenseOutlet />}
3233
{!hasDataHub && (
3334
<Box width="100%" mt={20}>
3435
<LicenseWarning />

‎hivemq-edge/src/frontend/src/extensions/datahub/components/pages/PolicyEditor.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@ import ReactFlow, {
88
ReactFlowProvider,
99
XYPosition,
1010
} from 'reactflow'
11-
import { Outlet } from 'react-router-dom'
1211
import { useTranslation } from 'react-i18next'
1312
import { Box } from '@chakra-ui/react'
1413

1514
import styles from './PolicyEditor.module.scss'
1615

16+
import SuspenseOutlet from '@/components/SuspenseOutlet.tsx'
1717
import CanvasControls from '@datahub/components/controls/CanvasControls.tsx'
1818
import Minimap from '@datahub/components/controls/Minimap.tsx'
1919
import DesignerToolbox from '@datahub/components/controls/DesignerToolbox.tsx'
@@ -180,7 +180,7 @@ const PolicyEditor: FC = () => {
180180
<Minimap />
181181
</Box>
182182
</ReactFlow>
183-
<Outlet />
183+
<SuspenseOutlet />
184184
</ReactFlowProvider>
185185
</>
186186
)

‎hivemq-edge/src/frontend/src/modules/Bridges/BridgePage.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@ import { FC } from 'react'
22
import { useTranslation } from 'react-i18next'
33
import { Button, Flex } from '@chakra-ui/react'
44
import { BiAddToQueue } from 'react-icons/bi'
5-
import { Outlet, useNavigate } from 'react-router-dom'
5+
import { useNavigate } from 'react-router-dom'
66

7+
import SuspenseOutlet from '@/components/SuspenseOutlet.tsx'
78
import PageContainer from '@/components/PageContainer.tsx'
89
import Bridges from '@/modules/Bridges/Bridges.tsx'
910
import { BridgeProvider } from '@/modules/Bridges/hooks/useBridgeConfig.tsx'
@@ -33,7 +34,7 @@ const BridgePage: FC = () => {
3334
>
3435
<BridgeProvider>
3536
<Bridges />
36-
<Outlet />
37+
<SuspenseOutlet />
3738
</BridgeProvider>
3839
</PageContainer>
3940
)

‎hivemq-edge/src/frontend/src/modules/Dashboard/Dashboard.tsx‎

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import { FC, Suspense } from 'react'
1+
import { FC } from 'react'
22
import { useTranslation } from 'react-i18next'
3-
import { Navigate, Outlet } from 'react-router-dom'
3+
import { Navigate } from 'react-router-dom'
44
import { AbsoluteCenter, Box, Flex } from '@chakra-ui/react'
55
import { SkipNavContent, SkipNavLink } from '@chakra-ui/skip-nav'
66

77
import LoaderSpinner from '@/components/Chakra/LoaderSpinner.tsx'
8-
9-
import SidePanel from './components/SidePanel.tsx'
10-
import { useAuth } from '../Auth/hooks/useAuth.ts'
8+
import SuspenseOutlet from '@/components/SuspenseOutlet.tsx'
9+
import SidePanel from '@/modules/Dashboard/components/SidePanel.tsx'
10+
import { useAuth } from '@/modules/Auth/hooks/useAuth.ts'
1111

1212
const Dashboard: FC = () => {
1313
const { credentials, isLoading } = useAuth()
@@ -33,15 +33,7 @@ const Dashboard: FC = () => {
3333
<SidePanel />
3434
<Flex as="main" flexGrow={1} overflow="auto">
3535
<SkipNavContent />
36-
<Suspense
37-
fallback={
38-
<AbsoluteCenter axis="both">
39-
<LoaderSpinner />
40-
</AbsoluteCenter>
41-
}
42-
>
43-
<Outlet />
44-
</Suspense>
36+
<SuspenseOutlet />
4537
</Flex>
4638
</Flex>
4739
</>

‎hivemq-edge/src/frontend/src/modules/ProtocolAdapters/ProtocolAdapterPage.tsx‎

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import { FC, Suspense, useEffect, useMemo, useState } from 'react'
1+
import { FC, useEffect, useMemo, useState } from 'react'
22
import { useTranslation } from 'react-i18next'
3-
import { AbsoluteCenter, Tab, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/react'
3+
import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/react'
44

5-
import { Outlet, useLocation } from 'react-router-dom'
5+
import { useLocation } from 'react-router-dom'
66

77
import { useGetConfiguration } from '@/api/hooks/useFrontendServices/useGetConfiguration.tsx'
8-
import LoaderSpinner from '@/components/Chakra/LoaderSpinner.tsx'
8+
import SuspenseOutlet from '@/components/SuspenseOutlet.tsx'
99
import PageContainer from '@/components/PageContainer.tsx'
1010
import ProtocolAdapters from '@/modules/ProtocolAdapters/components/panels/ProtocolAdapters.tsx'
1111
import ProtocolIntegrationStore from '@/modules/ProtocolAdapters/components/panels/ProtocolIntegrationStore.tsx'
@@ -55,15 +55,7 @@ const ProtocolAdapterPage: FC = () => {
5555
</TabPanel>
5656
</TabPanels>
5757
</Tabs>
58-
<Suspense
59-
fallback={
60-
<AbsoluteCenter axis="both">
61-
<LoaderSpinner />
62-
</AbsoluteCenter>
63-
}
64-
>
65-
<Outlet />
66-
</Suspense>
58+
<SuspenseOutlet />
6759
</PageContainer>
6860
)
6961
}

‎hivemq-edge/src/frontend/src/modules/UnifiedNamespace/UnifiedNamespacePage.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { FC } from 'react'
22
import { useTranslation } from 'react-i18next'
3-
import { Outlet, useNavigate } from 'react-router-dom'
3+
import { useNavigate } from 'react-router-dom'
44
import { Box, Button, Flex, SimpleGrid } from '@chakra-ui/react'
55

66
import { useGetUnifiedNamespace } from '@/api/hooks/useUnifiedNamespace/useGetUnifiedNamespace.tsx'
@@ -12,6 +12,7 @@ import RecommendationPanel from '@/modules/UnifiedNamespace/components/panels/Re
1212
import PrefixPanel from '@/modules/UnifiedNamespace/components/panels/PrefixPanel.tsx'
1313
import { BiPlus } from 'react-icons/bi'
1414
import { mockISA95ApiBean } from '@/api/hooks/useUnifiedNamespace/__handlers__'
15+
import SuspenseOutlet from '@/components/SuspenseOutlet.tsx'
1516

1617
const UnifiedNamespacePage: FC = () => {
1718
const { t } = useTranslation()
@@ -70,7 +71,7 @@ const UnifiedNamespacePage: FC = () => {
7071
<PrefixPanel data={safeData} isLoading={isLoading} />
7172
</SimpleGrid>
7273
</SimpleGrid>
73-
<Outlet />
74+
<SuspenseOutlet />
7475
</>
7576
)}
7677
</PageContainer>

‎hivemq-edge/src/frontend/src/modules/Workspace/components/ReactFlowWrapper.tsx‎

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,28 @@
11
import { useEffect, useMemo } from 'react'
22
import { useTranslation } from 'react-i18next'
33
import ReactFlow, { Background } from 'reactflow'
4-
import { Outlet } from 'react-router-dom'
54
import { Box } from '@chakra-ui/react'
65

76
import 'reactflow/dist/style.css'
87
import './reactflow-chakra.fix.css'
98

10-
import { EdgeTypes, NodeTypes } from '../types.ts'
11-
import useGetFlowElements from '../hooks/useGetFlowElements.tsx'
12-
import useWorkspaceStore from '../hooks/useWorkspaceStore.ts'
13-
14-
import StatusListener from './controls/StatusListener.tsx'
15-
import CanvasControls from './controls/CanvasControls.tsx'
16-
import SelectionListener from './controls/SelectionListener.tsx'
17-
import GroupNodesControl from './controls/GroupNodesControl.tsx'
18-
import MonitoringEdge from './edges/MonitoringEdge.tsx'
19-
import { NodeAdapter, NodeBridge, NodeEdge, NodeGroup, NodeListener, NodeHost } from './nodes'
9+
import SuspenseOutlet from '@/components/SuspenseOutlet.tsx'
10+
import { EdgeTypes, NodeTypes } from '@/modules/Workspace/types.ts'
11+
import useGetFlowElements from '@/modules/Workspace/hooks/useGetFlowElements.tsx'
12+
import useWorkspaceStore from '@/modules/Workspace/hooks/useWorkspaceStore.ts'
13+
import StatusListener from '@/modules/Workspace/components/controls/StatusListener.tsx'
14+
import CanvasControls from '@/modules/Workspace/components/controls/CanvasControls.tsx'
15+
import SelectionListener from '@/modules/Workspace/components/controls/SelectionListener.tsx'
16+
import GroupNodesControl from '@/modules/Workspace/components/controls/GroupNodesControl.tsx'
17+
import MonitoringEdge from '@/modules/Workspace/components/edges/MonitoringEdge.tsx'
18+
import {
19+
NodeAdapter,
20+
NodeBridge,
21+
NodeEdge,
22+
NodeGroup,
23+
NodeListener,
24+
NodeHost,
25+
} from '@/modules/Workspace/components/nodes'
2026

2127
const ReactFlowWrapper = () => {
2228
const { t } = useTranslation()
@@ -67,7 +73,7 @@ const ReactFlowWrapper = () => {
6773
<Background />
6874
<CanvasControls />
6975
</Box>
70-
<Outlet />
76+
<SuspenseOutlet />
7177
</ReactFlow>
7278
)
7379
}

‎hivemq-edge/src/frontend/src/modules/Workspace/components/controls/NodePanelController.tsx‎

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import { FC, lazy, Suspense, useEffect } from 'react'
22
import { useNavigate, useParams } from 'react-router-dom'
33
import { Node, useEdges, useNodes } from 'reactflow'
4-
import { AbsoluteCenter, useDisclosure } from '@chakra-ui/react'
4+
import { useDisclosure } from '@chakra-ui/react'
55

66
import { Adapter, Bridge } from '@/api/__generated__'
7-
import LoaderSpinner from '@/components/Chakra/LoaderSpinner.tsx'
7+
import { SuspenseFallback } from '@/components/SuspenseOutlet.tsx'
88
import { AdapterNavigateState, ProtocolAdapterTabIndex } from '@/modules/ProtocolAdapters/types.ts'
9-
10-
import { EdgeTypes, Group, NodeTypes } from '../../types.ts'
9+
import { EdgeTypes, Group, NodeTypes } from '@/modules/Workspace/types.ts'
1110

1211
const NodePropertyDrawer = lazy(() => import('../drawers/NodePropertyDrawer.tsx'))
1312
const LinkPropertyDrawer = lazy(() => import('../drawers/LinkPropertyDrawer.tsx'))
@@ -68,14 +67,7 @@ const NodePanelController: FC = () => {
6867
if (!nodeId) return null
6968

7069
return (
71-
<Suspense
72-
// TODO[NVL] Would be good to integrate the loader within the drawer
73-
fallback={
74-
<AbsoluteCenter axis="both">
75-
<LoaderSpinner />
76-
</AbsoluteCenter>
77-
}
78-
>
70+
<Suspense fallback={<SuspenseFallback />}>
7971
{selectedLinkSource && selectedLinkSource.type !== NodeTypes.CLUSTER_NODE && (
8072
<LinkPropertyDrawer
8173
nodeId={nodeId}

0 commit comments

Comments
 (0)