Address updates pages review feedback

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>

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 />;

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>

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}

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>