From a6aabc6dadd45e2b116d4bcad9ba07995a9b26ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89mile=20R=C3=A9?= <emile@probo.com>
Date: Thu, 9 Jul 2026 19:39:16 -0400
Subject: [PATCH] Address updates pages review feedback
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Forward className on PaginationSkeleton to match the kit skeleton API,
and move the Next arrow to iconEnd per the forward-arrow convention.

Size the updates list skeleton to the page size so the placeholder no
longer jumps when the loaded page renders, and dispose the detail
query on updateId change to avoid a flash of the previous update.

Signed-off-by: Émile Ré <emile@probo.com>
---
 .../src/pages/updates/UpdateDetailPageLoader.tsx         | 7 +++++--
 .../src/pages/updates/UpdatesPageSkeleton.tsx            | 5 ++---
 packages/ui/src/v2/Pagination/Pagination.tsx             | 2 +-
 packages/ui/src/v2/Pagination/PaginationSkeleton.tsx     | 9 +++++++--
 4 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/apps/compliance-portal/src/pages/updates/UpdateDetailPageLoader.tsx b/apps/compliance-portal/src/pages/updates/UpdateDetailPageLoader.tsx
index 82ce98fdb..b4899ea1d 100644
--- a/apps/compliance-portal/src/pages/updates/UpdateDetailPageLoader.tsx
+++ b/apps/compliance-portal/src/pages/updates/UpdateDetailPageLoader.tsx
@@ -22,13 +22,16 @@ import { UpdateDetailPageSkeleton } from "./UpdateDetailPageSkeleton";
 
 export default function UpdateDetailPageLoader() {
   const { updateId } = useParams<{ updateId: string }>();
-  const [queryRef, loadQuery] = useQueryLoader<UpdateDetailPageQuery>(updateDetailPageQuery);
+  const [queryRef, loadQuery, disposeQuery] = useQueryLoader<UpdateDetailPageQuery>(updateDetailPageQuery);
 
+  // Dispose on updateId change so navigating between updates shows the skeleton
+  // during the transition instead of the previous update's content.
   useEffect(() => {
     if (updateId) {
       loadQuery({ updateId });
     }
-  }, [loadQuery, updateId]);
+    return () => disposeQuery();
+  }, [loadQuery, disposeQuery, updateId]);
 
   if (!queryRef) {
     return <UpdateDetailPageSkeleton />;
diff --git a/apps/compliance-portal/src/pages/updates/UpdatesPageSkeleton.tsx b/apps/compliance-portal/src/pages/updates/UpdatesPageSkeleton.tsx
index 7e98df5cc..c21eef5ce 100644
--- a/apps/compliance-portal/src/pages/updates/UpdatesPageSkeleton.tsx
+++ b/apps/compliance-portal/src/pages/updates/UpdatesPageSkeleton.tsx
@@ -19,8 +19,7 @@ import { ComplianceArticleItemSkeleton } from "#/components/ComplianceArticleIte
 import { HeaderBand } from "#/components/HeaderBand/HeaderBand";
 
 import { updatesList } from "./_components/variants";
-
-const ROW_COUNT = 10;
+import { UPDATES_PAGE_SIZE } from "./_lib/constants";
 
 export function UpdatesPageSkeleton() {
   const { card, rows } = updatesList();
@@ -36,7 +35,7 @@ export function UpdatesPageSkeleton() {
         <div className="flex w-full max-w-5xl flex-col gap-8">
           <div className={card()} aria-hidden>
             <div className={rows()}>
-              {Array.from({ length: ROW_COUNT }, (_, index) => (
+              {Array.from({ length: UPDATES_PAGE_SIZE }, (_, index) => (
                 <ComplianceArticleItemSkeleton key={index} />
               ))}
             </div>
diff --git a/packages/ui/src/v2/Pagination/Pagination.tsx b/packages/ui/src/v2/Pagination/Pagination.tsx
index ea1c1605d..b7545834a 100644
--- a/packages/ui/src/v2/Pagination/Pagination.tsx
+++ b/packages/ui/src/v2/Pagination/Pagination.tsx
@@ -71,7 +71,7 @@ export function Pagination(props: PaginationProps) {
         variant="ghost"
         color="neutral"
         size={2}
-        iconStart={<CaretRightIcon />}
+        iconEnd={<CaretRightIcon />}
         aria-label={nextLabel}
         className={hasNext ? undefined : "invisible"}
         onClick={onNext}
diff --git a/packages/ui/src/v2/Pagination/PaginationSkeleton.tsx b/packages/ui/src/v2/Pagination/PaginationSkeleton.tsx
index 1bb47bc38..86fafd20b 100644
--- a/packages/ui/src/v2/Pagination/PaginationSkeleton.tsx
+++ b/packages/ui/src/v2/Pagination/PaginationSkeleton.tsx
@@ -12,14 +12,19 @@
 // OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 // PERFORMANCE OF THIS SOFTWARE.
 
+import type { ComponentProps } from "react";
+
 import { pagination } from "./variants";
 
+export type PaginationSkeletonProps = Omit<ComponentProps<"div">, "children">;
+
 // Loading placeholder paired with Pagination: two pulse arrow blocks.
-export function PaginationSkeleton() {
+export function PaginationSkeleton(props: PaginationSkeletonProps) {
+  const { className, ...rest } = props;
   const { root, buttonPlaceholder } = pagination();
 
   return (
-    <div className={root()} aria-hidden>
+    <div className={root({ className })} {...rest} aria-hidden>
       <div className={buttonPlaceholder()} />
       <div className={buttonPlaceholder()} />
     </div>