fix(ebay-carousel): fix width calculation for last pill when font not…

… loaded (#2352)

.changeset/strong-grapes-work.md

@@ -0,0 +1,5 @@
+---
+"@ebay/ebayui-core": minor
+---
+
+fix(ebay-carousel): fix width calculation for last pill when font not loaded (#2344)

src/components/ebay-carousel/README.md

@@ -7,13 +7,13 @@
     </span>
 </h1>
 
-Descrete or Continuious carousel component. Can show items as a slide or various widths.
+Discrete or Continuous carousel component. Can show items as a slide or various widths.
 
 ## Examples and Documentation
 
-- [Storybook](https://ebay.github.io/ebayui-core/?path=/story/navigation-disclosure-ebay-carousel)
-- [Storybook Docs](https://ebay.github.io/ebayui-core/?path=/docs/navigation-disclosure-ebay-carousel)
-- [Code Examples](https://github.com/eBay/ebayui-core/tree/master/src/components/ebay-carousel/examples)
+-   [Storybook](https://ebay.github.io/ebayui-core/?path=/story/navigation-disclosure-ebay-carousel)
+-   [Storybook Docs](https://ebay.github.io/ebayui-core/?path=/docs/navigation-disclosure-ebay-carousel)
+-   [Code Examples](https://github.com/eBay/ebayui-core/tree/master/src/components/ebay-carousel/examples)
 
 ## Preserving tabindex for focusable elements
 
@@ -22,4 +22,4 @@ In order to preserve the tabindex on an item, pass `data-carousel-tabindex="-1"`
 
 ## Reduced motion
 
-The carousel doesnot autoplay by respecting the `prefers-reduced-motion` media query. Toggle your reduced motion settings to view autoplay example with the default behavior and reduced motion behavior.
+The carousel does not autoplay by respecting the `prefers-reduced-motion` media query. Toggle your reduced motion settings to view autoplay example with the default behavior and reduced motion behavior.

src/components/ebay-carousel/component.ts

@@ -531,7 +531,7 @@ class Carousel extends Marko.Component<Input, State> {
                     if (!config.scrollTransitioning) {
                         this.handleScroll(this.listEl.scrollLeft);
                     }
-                }),
+                })
             );
         } else {
             this.subscribeTo(this.listEl).on("transitionend", ({ target }) => {
@@ -540,8 +540,13 @@ class Carousel extends Marko.Component<Input, State> {
                 }
             });
         }
-
         this.onRenderLegacy();
+
+        document.fonts.ready.then(() => {
+            this.cleanupAsync();
+            this.onRenderLegacy();
+        });
+
     }
 
     onUpdate() {