fix: issues

Author: Yaros1ove

src/components/ExpandableContributorList/LazyExpandableContributorsList.tsx

@@ -11,6 +11,8 @@ type Props = Omit<
     'cacheKey' | 'getComponent' | 'getComponentProps' | 'loader'
 >;
 
+import './ExpandableContributorList.scss';
+
 const b = block('expandable-contributor-list');
 
 const getComponent = async () => {

src/components/IntersectionLoadComponent/IntersectionLoadComponent.tsx

@@ -11,23 +11,11 @@ type Props<Component extends React.ComponentType> = {
     intersectionOptions?: IntersectionObserverInit;
     onIntersect?: () => void;
     onLoad?: NoInfer<(component: Component, props: React.ComponentProps<Component>) => void>;
+    wrapperClassName?: string;
 };
 
 const cache = new Map();
 
-/**
- * HOC for lazy loading component when it reaches viewport
- * @param {string} cacheKey
- * @param {function(): Promise<Component>} getComponent component import function
- * @param {function(): Promise<React.ComponentProps<Component>>} getComponentProps async function for component props; async for loading data from server by demand
- * @param {IntersectionObserverInit} intersectionOptions IntersectionObserver options
- * @param {JSX.Element} loader displaying while component is being loaded
- * @param {function(): void} onIntersect callback, fires when component reaches viewport
- * @param {function(Component, React.ComponentProps<Component>): void} onLoad callback, fires when component is loaded
- * @returns {JSX.Element} loaded component or loader
- */
-// unknown/{}/object doesn't work
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const IntersectionLoadComponent = <Component extends React.ComponentType<any>>({
     cacheKey,
     getComponent,
@@ -36,6 +24,7 @@ export const IntersectionLoadComponent = <Component extends React.ComponentType<
     intersectionOptions,
     onIntersect,
     onLoad,
+    wrapperClassName,
 }: Props<Component>) => {
     const [waitingLoad, setWaitingLoad] = React.useState(!cache.has(cacheKey));
     const [intersectionElementRef, setIntersectionElementRef] =
@@ -73,21 +62,25 @@ export const IntersectionLoadComponent = <Component extends React.ComponentType<
     if (cache.has(cacheKey)) {
         const {Component, props} = cache.get(cacheKey);
 
-        return <Component key={cacheKey} {...props} />;
+        return (
+            <div className={wrapperClassName} key={cacheKey}>
+                <Component {...props} />
+            </div>
+        );
     }
 
     if (waitingLoad) {
         return (
-            <div key={cacheKey}>
+            <div className={wrapperClassName} key={cacheKey}>
                 <div ref={setIntersectionElementRef} />
                 {loader}
             </div>
         );
     }
 
     return (
-        <div key={cacheKey}>
-            <React.Suspense fallback={loader}>
+        <div className={wrapperClassName} key={cacheKey}>
+            <React.Suspense key={cacheKey} fallback={loader}>
                 <LazyComponent />
             </React.Suspense>
         </div>

src/components/UISamples/TablePreview/LazyTablePreview.tsx

@@ -1,6 +1,10 @@
+import {Loader} from '@gravity-ui/uikit';
 import {IntersectionLoadComponent} from 'src/components/IntersectionLoadComponent/IntersectionLoadComponent';
+import {block} from 'src/utils';
 
-import {UISamplesLoader} from '../UISamplesLoader/UISamplesLoader';
+import './TablePreview.scss';
+
+const b = block('table-preview');
 
 const getComponent = async () => (await import('./TablePreview')).TablePreview;
 
@@ -9,7 +13,8 @@ export const LazyTablePreview: React.FC = () => {
         <IntersectionLoadComponent
             cacheKey="TablePreview"
             getComponent={getComponent}
-            loader={<UISamplesLoader />}
+            loader={<Loader className={b('loader')} size="l" />}
+            wrapperClassName={b('loader')}
         />
     );
 };

src/components/UISamples/TablePreview/TablePreview.scss

@@ -16,4 +16,13 @@ $block: '.#{variables.$ns}table-preview';
         overflow-x: auto;
         white-space: nowrap;
     }
+
+    &__loader {
+        width: 100%;
+        height: 100%;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
 }

src/components/UISamples/UISamplesLoader/UISamplesLoader.scss

@@ -10,4 +10,7 @@ $block: '.#{variables.$ns}uisamples-loader';
     display: flex;
     justify-content: center;
     align-items: center;
+
+    border: 1px solid var(--g-color-line-generic);
+    border-radius: 16px;
 }