Skip to content

Commit 6fd1a17

Browse files
KonradPietochaKonradPietocha
committed
Use deferred value for start column
1 parent 5fdeccd commit 6fd1a17

File tree

1 file changed

+74
-78
lines changed

1 file changed

+74
-78
lines changed

‎src/resources/other/kymaModules.routes.js‎

Lines changed: 74 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { FlexibleColumnLayout } from '@ui5/webcomponents-react';
2-
import React, { Suspense } from 'react';
2+
import React, { Suspense, useDeferredValue } from 'react';
33
import { Route, useParams } from 'react-router';
44
import { useRecoilState } from 'recoil';
55
import { ErrorBoundary } from 'shared/components/ErrorBoundary/ErrorBoundary';
@@ -52,78 +52,72 @@ const ColumnWrapper = ({
5252
rawResourceTypeName: 'Kyma',
5353
});
5454

55-
const startColumnComponent = () => {
56-
return (
57-
<div className="column-content">
58-
{layoutState.layout === 'OneColumn' && defaultColumn === 'details' ? (
59-
<ExtensibilityDetails
60-
layoutCloseCreateUrl={url}
61-
resourceName={layoutState?.midColumn?.resourceName || resourceName}
62-
resourceType={layoutState?.midColumn?.resourceType || resourceType}
63-
namespaceId={
64-
layoutState?.midColumn?.namespaceId ||
65-
layoutState?.midColumn?.namespaceId === ''
66-
? layoutState?.midColumn?.namespaceId
67-
: namespace
68-
}
69-
isModule={true}
70-
/>
71-
) : (
72-
<KymaModulesList namespaced={namespaced} />
73-
)}
74-
</div>
75-
);
76-
};
55+
const startColumnComponent = useDeferredValue(
56+
<div className="column-content">
57+
{layoutState.layout === 'OneColumn' && defaultColumn === 'details' ? (
58+
<ExtensibilityDetails
59+
layoutCloseCreateUrl={url}
60+
resourceName={layoutState?.midColumn?.resourceName || resourceName}
61+
resourceType={layoutState?.midColumn?.resourceType || resourceType}
62+
namespaceId={
63+
layoutState?.midColumn?.namespaceId ||
64+
layoutState?.midColumn?.namespaceId === ''
65+
? layoutState?.midColumn?.namespaceId
66+
: namespace
67+
}
68+
isModule={true}
69+
/>
70+
) : (
71+
<KymaModulesList namespaced={namespaced} />
72+
)}
73+
</div>,
74+
);
7775

78-
const midColumnComponent = () => {
79-
return (
80-
<>
81-
{/* details */}
82-
{!layoutState?.showCreate &&
83-
layoutState?.midColumn &&
84-
(defaultColumn !== 'details' ||
85-
layoutState.layout !== 'OneColumn') && (
86-
<div className="column-content">
87-
<ExtensibilityDetails
88-
layoutCloseCreateUrl={url}
89-
resourceName={
90-
layoutState?.midColumn?.resourceName || resourceName
91-
}
92-
resourceType={
93-
layoutState?.midColumn?.resourceType || resourceType
94-
}
95-
namespaceId={
96-
layoutState?.midColumn?.namespaceId ||
97-
layoutState?.midColumn?.namespaceId === ''
98-
? layoutState?.midColumn?.namespaceId
99-
: namespace
100-
}
101-
isModule={true}
102-
/>
103-
</div>
104-
)}
105-
{/* create */}
106-
{!layoutState?.midColumn &&
107-
(defaultColumn !== 'details' ||
108-
layoutState.layout !== 'OneColumn') && (
109-
<div className="column-content">
110-
<ResourceCreate
111-
title={t('kyma-modules.add-module')}
112-
confirmText={t('common.buttons.add')}
113-
layoutCloseCreateUrl={url}
114-
renderForm={renderProps => {
115-
return (
116-
<ErrorBoundary>
117-
<KymaModulesAddModule {...renderProps} />
118-
</ErrorBoundary>
119-
);
120-
}}
121-
/>
122-
</div>
123-
)}
124-
</>
125-
);
126-
};
76+
const midColumnComponent = (
77+
<>
78+
{/* details */}
79+
{!layoutState?.showCreate &&
80+
layoutState?.midColumn &&
81+
(defaultColumn !== 'details' || layoutState.layout !== 'OneColumn') && (
82+
<div className="column-content">
83+
<ExtensibilityDetails
84+
layoutCloseCreateUrl={url}
85+
resourceName={
86+
layoutState?.midColumn?.resourceName || resourceName
87+
}
88+
resourceType={
89+
layoutState?.midColumn?.resourceType || resourceType
90+
}
91+
namespaceId={
92+
layoutState?.midColumn?.namespaceId ||
93+
layoutState?.midColumn?.namespaceId === ''
94+
? layoutState?.midColumn?.namespaceId
95+
: namespace
96+
}
97+
isModule={true}
98+
/>
99+
</div>
100+
)}
101+
{/* create */}
102+
{!layoutState?.midColumn &&
103+
(defaultColumn !== 'details' || layoutState.layout !== 'OneColumn') && (
104+
<div className="column-content">
105+
<ResourceCreate
106+
title={t('kyma-modules.add-module')}
107+
confirmText={t('common.buttons.add')}
108+
layoutCloseCreateUrl={url}
109+
renderForm={renderProps => {
110+
return (
111+
<ErrorBoundary>
112+
<KymaModulesAddModule {...renderProps} />
113+
</ErrorBoundary>
114+
);
115+
}}
116+
/>
117+
</div>
118+
)}
119+
</>
120+
);
127121

128122
return (
129123
<ModuleTemplatesContextProvider>
@@ -141,12 +135,14 @@ const ColumnWrapper = ({
141135
handleResourceDelete={handleResourceDelete}
142136
showDeleteDialog={showDeleteDialog}
143137
>
144-
<FlexibleColumnLayout
145-
style={{ height: '100%' }}
146-
layout={layoutState?.layout}
147-
startColumn={startColumnComponent()}
148-
midColumn={midColumnComponent()}
149-
/>
138+
<Suspense fallback={<Spinner />}>
139+
<FlexibleColumnLayout
140+
style={{ height: '100%' }}
141+
layout={layoutState?.layout}
142+
startColumn={startColumnComponent}
143+
midColumn={midColumnComponent}
144+
/>
145+
</Suspense>
150146
</CommunityModuleContextProvider>
151147
</KymaModuleContextProvider>
152148
</ModuleTemplatesContextProvider>

0 commit comments

Comments
 (0)