Fix loading animation for Carousel

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<ICarousel> = (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<number>(0);
   const [currentPage, setCurrentPage] = useState<number>(1);
@@ -62,7 +65,7 @@ const Carousel: React.FC<ICarousel> = (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}
         >
           <Icon
             src={require('@tabler/icons/chevron-left.svg')}
@@ -94,7 +97,7 @@ const Carousel: React.FC<ICarousel> = (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}
         >
           <Icon
             src={require('@tabler/icons/chevron-right.svg')}

app/soapbox/features/groups/components/discover/popular-groups.tsx

@@ -46,11 +46,12 @@ const PopularGroups = () => {
           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) => (
                   <div
                     className='relative flex shrink-0 flex-col space-y-2 px-0.5'
                     style={{ width: width || 'auto' }}

app/soapbox/features/groups/components/discover/suggested-groups.tsx

@@ -46,6 +46,7 @@ const SuggestedGroups = () => {
           itemWidth={250}
           itemCount={groups.length}
           controlsHeight={groupCover?.clientHeight}
+          isDisabled={isFetching}
         >
           {({ width }: { width: number }) => (
             <>

app/soapbox/hooks/useDimensions.ts

@@ -23,7 +23,7 @@ const useDimensions = (): UseDimensionsResult => {
     [],
   );
 
-  useEffect((): any => {
+  useEffect(() => {
     if (!element) return;
     observer.observe(element);