fix: Custom resources details wrong opening (#3629)

* Using Suspense to gently open the columns

* Removing unnecessary scroll under list item

Author: KonradPietocha

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) {

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>
+      }
     />
   );
 };