fix: Custom resources details wrong opening (#3629)

* Using Suspense to gently open the columns * Removing unnecessary scroll under list item
kyma-project · Jan 27, 2025 · 4168cf8 · 4168cf8
1 parent b32cf54
commit 4168cf8
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/src/components/CustomResources/GroupingListPage.scss b/src/components/CustomResources/GroupingListPage.scss
@@ -6,6 +6,12 @@
   ui5-table-cell[slot='default-2'] {
     width: 22vw;
   }
+
+  ui5-panel {
+    &::part(content) {
+      overflow: unset;
+    }
+  }
 }
 
 @media (max-width: 850px) {

diff --git a/src/resources/other/CustomResourcesByGroup.routes.js b/src/resources/other/CustomResourcesByGroup.routes.js
@@ -199,9 +199,21 @@ export const ColumnWrapper = ({ defaultColumn = 'list' }) => {
     <FlexibleColumnLayout
       style={{ height: '100%' }}
       layout={layoutState?.layout || 'OneColumn'}
-      startColumn={<div className="column-content">{startColumnComponent}</div>}
-      midColumn={<div className="column-content">{midColumnComponent}</div>}
-      endColumn={<div className="column-content">{endColumnComponent}</div>}
+      startColumn={
+        <div className="column-content">
+          <Suspense fallback={<Spinner />}>{startColumnComponent}</Suspense>
+        </div>
+      }
+      midColumn={
+        <div className="column-content">
+          <Suspense fallback={<Spinner />}>{midColumnComponent}</Suspense>
+        </div>
+      }
+      endColumn={
+        <div className="column-content">
+          <Suspense fallback={<Spinner />}>{endColumnComponent}</Suspense>
+        </div>
+      }
     />
   );
 };