From be4a7e45e94362e9c068d5c4542b81c1c839c00f Mon Sep 17 00:00:00 2001
From: Chewbacca <dice.warrant-02@icloud.com>
Date: Tue, 28 Mar 2023 10:30:34 -0400
Subject: [PATCH] Fix loading animation for Carousel

---
 app/soapbox/components/ui/carousel/carousel.tsx       | 11 +++++++----
 .../groups/components/discover/popular-groups.tsx     |  3 ++-
 .../groups/components/discover/suggested-groups.tsx   |  1 +
 app/soapbox/hooks/useDimensions.ts                    |  2 +-
 4 files changed, 11 insertions(+), 6 deletions(-)

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<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')}
diff --git a/app/soapbox/features/groups/components/discover/popular-groups.tsx b/app/soapbox/features/groups/components/discover/popular-groups.tsx
index c5bf90307..8dcf607e7 100644
--- a/app/soapbox/features/groups/components/discover/popular-groups.tsx
+++ b/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' }}
diff --git a/app/soapbox/features/groups/components/discover/suggested-groups.tsx b/app/soapbox/features/groups/components/discover/suggested-groups.tsx
index 9925a423e..1e6c2514e 100644
--- a/app/soapbox/features/groups/components/discover/suggested-groups.tsx
+++ b/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 }) => (
             <>
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);