fix carousel initial positioning (#1546)

Author: ChristopherChudzicki

frontends/ol-components/src/components/Carousel/Carousel.tsx

@@ -31,14 +31,31 @@ type CarouselProps = {
   nextLabel?: string
 }
 
-const SlickStyled = styled(Slick)({
-  /**
-   * This is a fallback. The carousel's width should be constrained by it's
-   * parent. But if it's not, this will at least prevent it from resizing itself
-   * beyond the viewport width.
-   */
-  maxWidth: "100vw",
-})
+const SlickStyled = styled(Slick)<{ rendered: boolean }>(({ rendered }) => [
+  {
+    /**
+     * This is a fallback. The carousel's width should be constrained by it's
+     * parent. But if it's not, this will at least prevent it from resizing itself
+     * beyond the viewport width.
+     */
+    maxWidth: "100vw",
+    ".slick-track::before": {
+      // By default slick has empty string content on the ::before pseudo
+      // element, which interferes with spacing on initial render.
+      content: "none",
+    },
+  },
+  !rendered && {
+    ".slick-track": {
+      /**
+       * When react-slick renders on the server, it sets `style="width: 0px;"`
+       * on the `.slick-track` element. This, combined with auto margoins,
+       * causes the carousel to render with strange positioning initially.
+       */
+      width: "unset !important",
+    },
+  },
+])
 
 /**
  * Return the current slide and the sliders per paged, based on current element
@@ -125,7 +142,7 @@ const Carousel: React.FC<CarouselProps> = ({
   nextLabel = "Show next slides",
 }) => {
   const [slick, setSlick] = React.useState<Slick | null>(null)
-  const [slidesPerPage, setSlidesPerPage] = React.useState<number>(1)
+  const [slidesPerPage, setSlidesPerPage] = React.useState<number>(4)
   /**
    * The index of the first visible slide.
    * slick-carousel marks this slide with slick-current.
@@ -155,6 +172,11 @@ const Carousel: React.FC<CarouselProps> = ({
     slick.slickPrev()
   }, [slick])
 
+  const [rendered, setRendered] = React.useState(false)
+  React.useEffect(() => {
+    setRendered(true)
+  }, [])
+
   const arrows = (
     <>
       <ActionButton
@@ -184,6 +206,7 @@ const Carousel: React.FC<CarouselProps> = ({
     <>
       <SlickStyled
         className={className}
+        rendered={rendered}
         ref={setSlick}
         variableWidth
         initialSlide={initialSlide}