refactor: shared virtual-wrapper component

src/jobs/components/job-list/index.tsx

@@ -3,15 +3,14 @@
 import { cn } from '~/shared/utils/cn';
 import { reloadPage } from '~/shared/utils/reload-page';
 import { InternalErrorResult } from '~/shared/components/internal-error-result';
+import { VirtualWrapper } from '~/shared/components/virtual-wrapper';
 
 import { useJobList } from '~/jobs/hooks/use-job-list';
 import { InitJobCard } from '~/jobs/components/init-job-card';
 import { JobCard } from '~/jobs/components/job-card';
 import { JobCardSkeleton } from '~/jobs/components/job-card/skeleton';
 import { useFiltersContext } from '~/filters/providers/filters-provider/context';
 
-import { JobListVirtualWrapper } from './virtual-wrapper';
-
 export const JobList = () => {
   const {
     jobs,
@@ -42,7 +41,7 @@ export const JobList = () => {
           <>
             <InitJobCard filterParamsString={filterParamsString} />
 
-            <JobListVirtualWrapper count={jobs.length}>
+            <VirtualWrapper count={jobs.length}>
               {(index) => (
                 <div className={cn({ 'pt-8': index > 0 })}>
                   <JobCard
@@ -51,7 +50,7 @@ export const JobList = () => {
                   />
                 </div>
               )}
-            </JobListVirtualWrapper>
+            </VirtualWrapper>
 
             {hasNextPage ? (
               <div ref={inViewRef}>

src/jobs/components/job-list/virtual-wrapper.tsx → src/shared/components/virtual-wrapper/index.tsx

@@ -1,15 +1,11 @@
-'use client';
-
-import { useRef } from 'react';
-
-import { useVirtualizer } from '@tanstack/react-virtual';
+import { useVirtualWrapper } from './use-virtual-wrapper';
 
 interface Props {
   count: number;
   children: (index: number) => JSX.Element;
 }
 
-export const JobListVirtualWrapper = ({ count, children }: Props) => {
+export const VirtualWrapper = ({ count, children }: Props) => {
   const { parentRef, virtualizer, items } = useVirtualWrapper(count);
 
   return (
@@ -42,24 +38,3 @@ export const JobListVirtualWrapper = ({ count, children }: Props) => {
     </div>
   );
 };
-
-const OVERSCAN = 5;
-const ESTIMATE_SIZE = 500;
-
-const useVirtualWrapper = (count: number) => {
-  const parentRef = useRef<HTMLDivElement | null>(null);
-  const virtualizer = useVirtualizer({
-    count,
-    getScrollElement: () => parentRef.current,
-    estimateSize: () => ESTIMATE_SIZE,
-    overscan: OVERSCAN,
-    scrollMargin: parentRef.current?.offsetTop ?? 0,
-    initialRect: {
-      width: ESTIMATE_SIZE,
-      height: ESTIMATE_SIZE * 20,
-    },
-  });
-  const items = virtualizer.getVirtualItems();
-
-  return { parentRef, virtualizer, items };
-};

src/shared/components/virtual-wrapper/use-virtual-wrapper.ts

@@ -0,0 +1,24 @@
+import { useRef } from 'react';
+
+import { useVirtualizer } from '@tanstack/react-virtual';
+
+export const useVirtualWrapper = (count: number) => {
+  const parentRef = useRef<HTMLDivElement | null>(null);
+  const virtualizer = useVirtualizer({
+    count,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => ESTIMATE_SIZE,
+    overscan: OVERSCAN,
+    scrollMargin: parentRef.current?.offsetTop ?? 0,
+    initialRect: {
+      width: ESTIMATE_SIZE,
+      height: ESTIMATE_SIZE * 20,
+    },
+  });
+  const items = virtualizer.getVirtualItems();
+
+  return { parentRef, virtualizer, items };
+};
+
+const OVERSCAN = 5;
+const ESTIMATE_SIZE = 500;