Fixes bookingwidget skeleton and memoize fetching of creditcards

components/Forms/BookingWidget/FormContent/Search/index.tsx

@@ -245,7 +245,7 @@ export function SearchSkeleton() {
         </Caption>
       </div>
       <div className={styles.input}>
-        <SkeletonShimmer />
+        <SkeletonShimmer width={"100%"} />
       </div>
     </div>
   )

components/Forms/BookingWidget/FormContent/index.tsx

@@ -104,13 +104,13 @@ export function BookingWidgetFormContentSkeleton() {
           <Caption color="red" type="bold">
             {intl.formatMessage({ id: "booking.nights" }, { totalNights: 0 })}
           </Caption>
-          <SkeletonShimmer />
+          <SkeletonShimmer width={"100%"} />
         </div>
         <div className={styles.rooms}>
           <Caption color="red" type="bold" asChild>
             <span>{intl.formatMessage({ id: "Guests & Rooms" })}</span>
           </Caption>
-          <SkeletonShimmer />
+          <SkeletonShimmer width={"100%"} />
         </div>
       </div>
       <div className={styles.voucherContainer}>

server/routers/user/query.ts

@@ -214,13 +214,14 @@ export function parsedUser(data: User, isMFA: boolean) {
   return user
 }
 
-async function getCreditCards({
+const getCreditCards = cache(
+  async ({
     session,
     onlyNonExpired,
-}: {
+  }: {
     session: Session
     onlyNonExpired?: boolean
-}) {
+  }) => {
     getCreditCardsCounter.add(1)
     console.info("api.profile.creditCards start", JSON.stringify({}))
     const apiResponse = await api.get(api.endpoints.v1.Profile.creditCards, {
@@ -280,7 +281,8 @@ async function getCreditCards({
       }
       return true
     })
-}
+  }
+)
 
 export const userQueryRouter = router({
   get: protectedProcedure