diff --git a/app/soapbox/components/ui/carousel/carousel.tsx b/app/soapbox/components/ui/carousel/carousel.tsx index ddb10b37a..441c1b1d1 100644 --- a/app/soapbox/components/ui/carousel/carousel.tsx +++ b/app/soapbox/components/ui/carousel/carousel.tsx @@ -13,16 +13,19 @@ interface ICarousel { itemCount: number /** The minimum width per item */ itemWidth: number + /** Should the controls be disabled? */ + isDisabled?: boolean } /** * Carousel */ const Carousel: React.FC = (props): JSX.Element => { - const { children, controlsHeight, itemCount, itemWidth } = props; + const { children, controlsHeight, isDisabled, itemCount, itemWidth } = props; // eslint-disable-next-line @typescript-eslint/no-unused-vars - const [_ref, setContainerRef, { width: containerWidth }] = useDimensions(); + const [ref, setContainerRef, { width: finalContainerWidth }] = useDimensions(); + const containerWidth = finalContainerWidth || ref?.clientWidth; const [pageSize, setPageSize] = useState(0); const [currentPage, setCurrentPage] = useState(1); @@ -62,7 +65,7 @@ const Carousel: React.FC = (props): JSX.Element => { data-testid='prev-page' onClick={handlePrevPage} className='flex h-full w-7 items-center justify-center transition-opacity duration-500 disabled:opacity-25' - disabled={!hasPrevPage} + disabled={!hasPrevPage || isDisabled} > = (props): JSX.Element => { data-testid='next-page' onClick={handleNextPage} className='flex h-full w-7 items-center justify-center transition-opacity duration-500 disabled:opacity-25' - disabled={!hasNextPage} + disabled={!hasNextPage || isDisabled} > { itemWidth={250} itemCount={groups.length} controlsHeight={groupCover?.clientHeight} + isDisabled={isFetching} > {({ width }: { width: number }) => ( <> {isFetching ? ( - new Array(20).fill(0).map((_, idx) => ( + new Array(4).fill(0).map((_, idx) => (
{ itemWidth={250} itemCount={groups.length} controlsHeight={groupCover?.clientHeight} + isDisabled={isFetching} > {({ width }: { width: number }) => ( <> diff --git a/app/soapbox/hooks/useDimensions.ts b/app/soapbox/hooks/useDimensions.ts index ae0321e2b..7f831636d 100644 --- a/app/soapbox/hooks/useDimensions.ts +++ b/app/soapbox/hooks/useDimensions.ts @@ -23,7 +23,7 @@ const useDimensions = (): UseDimensionsResult => { [], ); - useEffect((): any => { + useEffect(() => { if (!element) return; observer.observe(element);