From a5b2e6967a53593a2766f651ebed89328b7e093f Mon Sep 17 00:00:00 2001
From: Joshua Wink <60934381+WinkeeFace@users.noreply.github.com>
Date: Fri, 20 Dec 2024 17:05:43 -0600
Subject: [PATCH] fix(ebay-carousel): fix width calculation for last pill when
 font not loaded (#2352)

---
 .changeset/strong-grapes-work.md          |  5 +++++
 src/components/ebay-carousel/README.md    | 10 +++++-----
 src/components/ebay-carousel/component.ts |  9 +++++++--
 3 files changed, 17 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/strong-grapes-work.md

diff --git a/.changeset/strong-grapes-work.md b/.changeset/strong-grapes-work.md
new file mode 100644
index 000000000..82c61a4d6
--- /dev/null
+++ b/.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)
diff --git a/src/components/ebay-carousel/README.md b/src/components/ebay-carousel/README.md
index af0f2fbbf..f8a9dcd78 100644
--- a/src/components/ebay-carousel/README.md
+++ b/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.
diff --git a/src/components/ebay-carousel/component.ts b/src/components/ebay-carousel/component.ts
index bd068fdf5..a2059ee54 100644
--- a/src/components/ebay-carousel/component.ts
+++ b/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() {