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>

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>