diff --git a/clients/banking/src/components/CardsArea.tsx b/clients/banking/src/components/CardsArea.tsx
index 83b7899d0..b9d2d8d7a 100644
--- a/clients/banking/src/components/CardsArea.tsx
+++ b/clients/banking/src/components/CardsArea.tsx
@@ -1,4 +1,4 @@
-import { Option } from "@swan-io/boxed";
+import { AsyncData, Option, Result } from "@swan-io/boxed";
 import { Breadcrumbs, BreadcrumbsRoot } from "@swan-io/lake/src/components/Breadcrumbs";
 import { FullViewportLayer } from "@swan-io/lake/src/components/FullViewportLayer";
 import { LakeButton } from "@swan-io/lake/src/components/LakeButton";
@@ -7,11 +7,11 @@ import { ResponsiveContainer } from "@swan-io/lake/src/components/ResponsiveCont
 import { Space } from "@swan-io/lake/src/components/Space";
 import { commonStyles } from "@swan-io/lake/src/constants/commonStyles";
 import { breakpoints, colors, spacings } from "@swan-io/lake/src/constants/design";
+import { useDeferredUrqlQuery } from "@swan-io/lake/src/hooks/useUrqlQuery";
 import { isNotNullish, isNullish } from "@swan-io/lake/src/utils/nullish";
-import { Suspense, useMemo } from "react";
+import { Suspense, useEffect, useMemo } from "react";
 import { StyleSheet, View } from "react-native";
 import { P, match } from "ts-pattern";
-import { useQuery } from "urql";
 import {
   AccountAreaQuery,
   CardCountWithAccountDocument,
@@ -23,6 +23,7 @@ import { t } from "../utils/i18n";
 import { Router } from "../utils/routes";
 import { CardItemArea } from "./CardItemArea";
 import { CardWizard } from "./CardWizard";
+import { ErrorView } from "./ErrorView";
 import { Redirect } from "./Redirect";
 
 const styles = StyleSheet.create({
@@ -91,43 +92,45 @@ const useDisplayableCardsInformation = ({
     } as const;
   }, [accountId]);
 
-  const [withAccountQuery] = useQuery({
-    query: CardCountWithAccountDocument,
-    pause: !hasAccountId,
-    variables: {
-      first: 1,
-      filters: filtersWithAccount,
-    },
-  });
+  const { data: withAccountQuery, query: queryWithAccount } = useDeferredUrqlQuery(
+    CardCountWithAccountDocument,
+  );
 
-  const [withoutAccountQuery] = useQuery({
-    query: CardCountWithoutAccountDocument,
-    pause: hasAccountId,
-    variables: {
-      accountMembershipId,
-      first: 1,
-      filters: relevantCardsFilter,
-    },
-  });
+  const { data: withoutAccountQuery, query: queryWithoutAccount } = useDeferredUrqlQuery(
+    CardCountWithoutAccountDocument,
+  );
+
+  useEffect(() => {
+    if (hasAccountId) {
+      queryWithAccount({
+        first: 1,
+        filters: filtersWithAccount,
+      });
+    } else {
+      queryWithoutAccount({
+        accountMembershipId,
+        first: 1,
+        filters: relevantCardsFilter,
+      });
+    }
+  }, [accountMembershipId, accountId, filtersWithAccount]);
 
   if (hasAccountId) {
-    return {
+    return withAccountQuery.mapOk(data => ({
       onlyCardId:
-        withAccountQuery.data?.cards.totalCount === 1
-          ? Option.fromNullable(withAccountQuery.data?.cards.edges[0]?.node.id)
+        data?.cards.totalCount === 1
+          ? Option.fromNullable(data?.cards.edges[0]?.node.id)
           : Option.None(),
-      totalDisplayableCardCount: withAccountQuery.data?.cards.totalCount ?? 0,
-    };
+      totalDisplayableCardCount: data?.cards.totalCount ?? 0,
+    }));
   } else {
-    return {
+    return withoutAccountQuery.mapOk(data => ({
       onlyCardId:
-        withoutAccountQuery.data?.accountMembership?.cards.totalCount === 1
-          ? Option.fromNullable(
-              withoutAccountQuery.data?.accountMembership?.cards.edges[0]?.node.id,
-            )
+        data?.accountMembership?.cards.totalCount === 1
+          ? Option.fromNullable(data?.accountMembership?.cards.edges[0]?.node.id)
           : Option.None(),
-      totalDisplayableCardCount: withoutAccountQuery.data?.accountMembership?.cards.totalCount ?? 0,
-    };
+      totalDisplayableCardCount: data?.accountMembership?.cards.totalCount ?? 0,
+    }));
   }
 };
 
@@ -145,7 +148,7 @@ export const CardsArea = ({
 }: Props) => {
   const route = Router.useRoute(["AccountCardsList", "AccountCardsItemArea"]);
 
-  const { onlyCardId, totalDisplayableCardCount } = useDisplayableCardsInformation({
+  const data = useDisplayableCardsInformation({
     accountMembershipId,
     accountId,
   });
@@ -160,111 +163,123 @@ export const CardsArea = ({
     [accountMembershipId],
   );
 
-  if (onlyCardId.isSome() && route?.name !== "AccountCardsItemArea") {
-    return (
-      <Redirect
-        to={Router.AccountCardsItem({
-          accountMembershipId,
-          cardId: onlyCardId.value,
-        })}
-      />
-    );
-  }
-
   if (isNullish(route?.name)) {
     return <NotFoundPage />;
   }
 
-  return (
-    <ResponsiveContainer style={styles.root} breakpoint={breakpoints.large}>
-      {({ large }) => (
-        <BreadcrumbsRoot rootLevelCrumbs={rootLevelCrumbs}>
-          <View style={styles.container} role="main">
-            {totalDisplayableCardCount > 1 ? (
-              <View style={[styles.header, large && styles.headerDesktop]}>
-                <Breadcrumbs />
-              </View>
-            ) : null}
+  return match(data)
+    .with(AsyncData.P.NotAsked, AsyncData.P.Loading, () => <LoadingView />)
+    .with(AsyncData.P.Done(Result.P.Error(P.select())), error => <ErrorView error={error} />)
+    .with(
+      AsyncData.P.Done(Result.P.Ok(P.select())),
+      ({ onlyCardId, totalDisplayableCardCount }) => {
+        if (onlyCardId.isSome() && route?.name !== "AccountCardsItemArea") {
+          return (
+            <Redirect
+              to={Router.AccountCardsItem({
+                accountMembershipId,
+                cardId: onlyCardId.value,
+              })}
+            />
+          );
+        }
 
-            {onlyCardId.isSome() ? <Space height={24} /> : null}
+        return (
+          <ResponsiveContainer style={styles.root} breakpoint={breakpoints.large}>
+            {({ large }) => (
+              <BreadcrumbsRoot rootLevelCrumbs={rootLevelCrumbs}>
+                <View style={styles.container} role="main">
+                  {totalDisplayableCardCount > 1 ? (
+                    <View style={[styles.header, large && styles.headerDesktop]}>
+                      <Breadcrumbs />
+                    </View>
+                  ) : null}
 
-            <Suspense fallback={<LoadingView color={colors.current[500]} />}>
-              <View style={styles.contents}>
-                {match(route)
-                  .with(
-                    { name: "AccountCardsList" },
-                    ({ params: { accountMembershipId, new: _, ...params } }) => (
-                      <CardListPage
-                        accountMembershipId={accountMembershipId}
-                        canManageCards={canManageCards}
-                        canManageAccountMembership={canManageAccountMembership}
-                        accountId={accountId}
-                        canAddCard={canAddCard}
-                        totalDisplayableCardCount={totalDisplayableCardCount}
-                        params={params}
-                        cardOrderVisible={cardOrderVisible}
-                      />
-                    ),
-                  )
-                  .with({ name: "AccountCardsItemArea" }, ({ params: { cardId } }) => (
-                    <>
-                      {canAddCard && cardOrderVisible && onlyCardId.isSome() ? (
-                        <View style={[styles.addButton, large && styles.addButtonDesktop]}>
-                          <LakeButton
-                            size="small"
-                            icon="add-circle-filled"
-                            color="current"
-                            onPress={() =>
-                              Router.push("AccountCardsItem", {
-                                cardId,
-                                accountMembershipId,
-                                new: "",
-                              })
-                            }
-                          >
-                            {t("common.new")}
-                          </LakeButton>
-                        </View>
-                      ) : null}
+                  {onlyCardId.isSome() ? <Space height={24} /> : null}
 
-                      <CardItemArea
-                        data-testid="user-card-item"
-                        accountMembershipId={accountMembershipId}
-                        userId={userId}
-                        cardId={cardId}
-                        refetchAccountAreaQuery={refetchAccountAreaQuery}
-                        canManageAccountMembership={canManageAccountMembership}
-                        physicalCardOrderVisible={physicalCardOrderVisible}
-                        large={large}
-                        canViewAccount={accountMembership.canViewAccount}
-                        canManageCards={accountMembership.canManageCards}
-                      />
-                    </>
-                  ))
-                  .with(P.nullish, () => null)
-                  .exhaustive()}
-              </View>
-            </Suspense>
+                  <Suspense fallback={<LoadingView color={colors.current[500]} />}>
+                    <View style={styles.contents}>
+                      {match(route)
+                        .with(
+                          { name: "AccountCardsList" },
+                          ({ params: { accountMembershipId, new: _, ...params } }) => (
+                            <CardListPage
+                              accountMembershipId={accountMembershipId}
+                              canManageCards={canManageCards}
+                              canManageAccountMembership={canManageAccountMembership}
+                              accountId={accountId}
+                              canAddCard={canAddCard}
+                              totalDisplayableCardCount={totalDisplayableCardCount}
+                              params={params}
+                              cardOrderVisible={cardOrderVisible}
+                            />
+                          ),
+                        )
+                        .with({ name: "AccountCardsItemArea" }, ({ params: { cardId } }) => (
+                          <>
+                            {canAddCard && cardOrderVisible && onlyCardId.isSome() ? (
+                              <View style={[styles.addButton, large && styles.addButtonDesktop]}>
+                                <LakeButton
+                                  size="small"
+                                  icon="add-circle-filled"
+                                  color="current"
+                                  onPress={() =>
+                                    Router.push("AccountCardsItem", {
+                                      cardId,
+                                      accountMembershipId,
+                                      new: "",
+                                    })
+                                  }
+                                >
+                                  {t("common.new")}
+                                </LakeButton>
+                              </View>
+                            ) : null}
 
-            <FullViewportLayer visible={isNotNullish(route?.params.new)}>
-              <CardWizard
-                physicalCardOrderVisible={physicalCardOrderVisible}
-                accountMembership={accountMembership}
-                onPressClose={() => {
-                  match(route)
-                    .with({ name: P.string }, ({ name, params }) => {
-                      Router.push(name === "AccountCardsItemArea" ? "AccountCardsItem" : name, {
-                        ...params,
-                        new: undefined,
-                      });
-                    })
-                    .otherwise(() => {});
-                }}
-              />
-            </FullViewportLayer>
-          </View>
-        </BreadcrumbsRoot>
-      )}
-    </ResponsiveContainer>
-  );
+                            <CardItemArea
+                              data-testid="user-card-item"
+                              accountMembershipId={accountMembershipId}
+                              userId={userId}
+                              cardId={cardId}
+                              refetchAccountAreaQuery={refetchAccountAreaQuery}
+                              canManageAccountMembership={canManageAccountMembership}
+                              physicalCardOrderVisible={physicalCardOrderVisible}
+                              large={large}
+                              canViewAccount={accountMembership.canViewAccount}
+                              canManageCards={accountMembership.canManageCards}
+                            />
+                          </>
+                        ))
+                        .with(P.nullish, () => null)
+                        .exhaustive()}
+                    </View>
+                  </Suspense>
+
+                  <FullViewportLayer visible={isNotNullish(route?.params.new)}>
+                    <CardWizard
+                      physicalCardOrderVisible={physicalCardOrderVisible}
+                      accountMembership={accountMembership}
+                      onPressClose={() => {
+                        match(route)
+                          .with({ name: P.string }, ({ name, params }) => {
+                            Router.push(
+                              name === "AccountCardsItemArea" ? "AccountCardsItem" : name,
+                              {
+                                ...params,
+                                new: undefined,
+                              },
+                            );
+                          })
+                          .otherwise(() => {});
+                      }}
+                    />
+                  </FullViewportLayer>
+                </View>
+              </BreadcrumbsRoot>
+            )}
+          </ResponsiveContainer>
+        );
+      },
+    )
+    .exhaustive();
 };
diff --git a/clients/banking/src/components/MembershipDetailArea.tsx b/clients/banking/src/components/MembershipDetailArea.tsx
index 1b99edd3a..66a2e17ff 100644
--- a/clients/banking/src/components/MembershipDetailArea.tsx
+++ b/clients/banking/src/components/MembershipDetailArea.tsx
@@ -1,21 +1,23 @@
+import { AsyncData, Result } from "@swan-io/boxed";
 import { Box } from "@swan-io/lake/src/components/Box";
 import { LakeAlert } from "@swan-io/lake/src/components/LakeAlert";
 import { LakeHeading } from "@swan-io/lake/src/components/LakeHeading";
 import { LakeText } from "@swan-io/lake/src/components/LakeText";
 import { ListRightPanelContent } from "@swan-io/lake/src/components/ListRightPanel";
+import { LoadingView } from "@swan-io/lake/src/components/LoadingView";
 import { Space } from "@swan-io/lake/src/components/Space";
 import { TabView } from "@swan-io/lake/src/components/TabView";
 import { Tag } from "@swan-io/lake/src/components/Tag";
 import { Tile } from "@swan-io/lake/src/components/Tile";
 import { commonStyles } from "@swan-io/lake/src/constants/commonStyles";
 import { colors, negativeSpacings, spacings } from "@swan-io/lake/src/constants/design";
+import { useUrqlQuery } from "@swan-io/lake/src/hooks/useUrqlQuery";
 import { isNotNullishOrEmpty } from "@swan-io/lake/src/utils/nullish";
 import { CountryCCA3 } from "@swan-io/shared-business/src/constants/countries";
 import dayjs from "dayjs";
 import { useMemo } from "react";
 import { ScrollView, StyleSheet, View } from "react-native";
 import { P, match } from "ts-pattern";
-import { useQuery } from "urql";
 import { AccountMembershipFragment, MembershipDetailDocument } from "../graphql/partner";
 import { getMemberName } from "../utils/accountMembership";
 import { t } from "../utils/i18n";
@@ -90,290 +92,297 @@ export const MembershipDetailArea = ({
 }: Props) => {
   const route = Router.useRoute(membershipsDetailRoutes);
 
-  const [{ data }, reload] = useQuery({
+  const { data, reload } = useUrqlQuery({
     query: MembershipDetailDocument,
     variables: { accountMembershipId: editingAccountMembershipId },
   });
 
   const accountMembership = useMemo(() => {
-    return match(data)
-      .returnType<AccountMembershipFragment | undefined>()
-      .with(
-        {
-          accountMembership: {
-            canManageAccountMembership: false,
-            canInitiatePayments: false,
-            canManageBeneficiaries: false,
-            canViewAccount: false,
-            canManageCards: false,
-            statusInfo: {
-              __typename: "AccountMembershipBindingUserErrorStatusInfo",
-              idVerifiedMatchError: true,
+    return data.mapOk(data =>
+      match(data)
+        .returnType<AccountMembershipFragment | undefined>()
+        .with(
+          {
+            accountMembership: {
+              canManageAccountMembership: false,
+              canInitiatePayments: false,
+              canManageBeneficiaries: false,
+              canViewAccount: false,
+              canManageCards: false,
+              statusInfo: {
+                __typename: "AccountMembershipBindingUserErrorStatusInfo",
+                idVerifiedMatchError: true,
+              },
             },
+            projectInfo: { B2BMembershipIDVerification: false },
           },
-          projectInfo: { B2BMembershipIDVerification: false },
-        },
-        ({ accountMembership }) => ({
-          ...accountMembership,
-          statusInfo: {
-            ...accountMembership.statusInfo,
-            idVerifiedMatchError: false,
-          },
-        }),
-      )
-      .otherwise(() => data?.accountMembership ?? undefined);
+          ({ accountMembership }) => ({
+            ...accountMembership,
+            statusInfo: {
+              ...accountMembership.statusInfo,
+              idVerifiedMatchError: false,
+            },
+          }),
+        )
+        .otherwise(() => data?.accountMembership ?? undefined),
+    );
   }, [data]);
 
-  if (accountMembership == null) {
-    return null;
-  }
-
-  const requiresIdentityVerification =
-    shouldDisplayIdVerification && accountMembership.hasRequiredIdentificationLevel === false;
+  return match(data)
+    .with(AsyncData.P.NotAsked, AsyncData.P.Loading, () => (
+      <LoadingView color={colors.current[500]} />
+    ))
+    .with(AsyncData.P.Done(Result.P.Error(P.select())), error => <ErrorView error={error} />)
+    .with(AsyncData.P.Done(Result.P.Ok(P.select())), ({ accountMembership }) => {
+      if (accountMembership == null) {
+        return null;
+      }
 
-  return (
-    <ScrollView
-      contentContainerStyle={large ? styles.scrollContainerDesktop : styles.scrollContainerMobile}
-    >
-      <View style={styles.container}>
-        <ListRightPanelContent large={large}>
-          <Tile
-            footer={match(accountMembership.statusInfo)
-              .with(
-                {
-                  __typename: "AccountMembershipBindingUserErrorStatusInfo",
-                  idVerifiedMatchError: true,
-                },
-                () => (
-                  <LakeAlert
-                    anchored={true}
-                    title={t("membershipDetail.idVerifiedMatchError.description")}
-                    variant="warning"
-                  />
-                ),
-              )
-              .with({ __typename: "AccountMembershipBindingUserErrorStatusInfo" }, () => (
-                <LakeAlert
-                  anchored={true}
-                  title={t("membershipDetail.bindingUserError.description")}
-                  variant="error"
-                />
-              ))
-              .otherwise(() => null)}
-          >
-            <Box alignItems="center">
-              {match(accountMembership.statusInfo)
-                .with({ __typename: "AccountMembershipEnabledStatusInfo" }, () => (
-                  <Tag color="positive">{t("memberships.status.active")}</Tag>
-                ))
+      const requiresIdentityVerification =
+        shouldDisplayIdVerification && accountMembership.hasRequiredIdentificationLevel === false;
+      <ScrollView
+        contentContainerStyle={large ? styles.scrollContainerDesktop : styles.scrollContainerMobile}
+      >
+        <View style={styles.container}>
+          <ListRightPanelContent large={large}>
+            <Tile
+              footer={match(accountMembership.statusInfo)
                 .with(
                   {
                     __typename: "AccountMembershipBindingUserErrorStatusInfo",
                     idVerifiedMatchError: true,
                   },
-                  () => <Tag color="warning">{t("memberships.status.limitedAccess")}</Tag>,
+                  () => (
+                    <LakeAlert
+                      anchored={true}
+                      title={t("membershipDetail.idVerifiedMatchError.description")}
+                      variant="warning"
+                    />
+                  ),
                 )
                 .with({ __typename: "AccountMembershipBindingUserErrorStatusInfo" }, () => (
-                  <Tag color="negative">{t("memberships.status.conflict")}</Tag>
-                ))
-                .with({ __typename: "AccountMembershipInvitationSentStatusInfo" }, () => (
-                  <Tag color="shakespear">{t("memberships.status.invitationSent")}</Tag>
-                ))
-                .with({ __typename: "AccountMembershipSuspendedStatusInfo" }, () => (
-                  <Tag color="warning">{t("memberships.status.temporarilyBlocked")}</Tag>
-                ))
-                .with({ __typename: "AccountMembershipDisabledStatusInfo" }, () => (
-                  <Tag color="gray">{t("memberships.status.permanentlyBlocked")}</Tag>
+                  <LakeAlert
+                    anchored={true}
+                    title={t("membershipDetail.bindingUserError.description")}
+                    variant="error"
+                  />
                 ))
-                .with({ __typename: "AccountMembershipConsentPendingStatusInfo" }, () => null)
-                .exhaustive()}
+                .otherwise(() => null)}
+            >
+              <Box alignItems="center">
+                {match(accountMembership.statusInfo)
+                  .with({ __typename: "AccountMembershipEnabledStatusInfo" }, () => (
+                    <Tag color="positive">{t("memberships.status.active")}</Tag>
+                  ))
+                  .with(
+                    {
+                      __typename: "AccountMembershipBindingUserErrorStatusInfo",
+                      idVerifiedMatchError: true,
+                    },
+                    () => <Tag color="warning">{t("memberships.status.limitedAccess")}</Tag>,
+                  )
+                  .with({ __typename: "AccountMembershipBindingUserErrorStatusInfo" }, () => (
+                    <Tag color="negative">{t("memberships.status.conflict")}</Tag>
+                  ))
+                  .with({ __typename: "AccountMembershipInvitationSentStatusInfo" }, () => (
+                    <Tag color="shakespear">{t("memberships.status.invitationSent")}</Tag>
+                  ))
+                  .with({ __typename: "AccountMembershipSuspendedStatusInfo" }, () => (
+                    <Tag color="warning">{t("memberships.status.temporarilyBlocked")}</Tag>
+                  ))
+                  .with({ __typename: "AccountMembershipDisabledStatusInfo" }, () => (
+                    <Tag color="gray">{t("memberships.status.permanentlyBlocked")}</Tag>
+                  ))
+                  .with({ __typename: "AccountMembershipConsentPendingStatusInfo" }, () => null)
+                  .exhaustive()}
 
-              <Space height={12} />
+                <Space height={12} />
 
-              <LakeHeading level={1} variant={large ? "h1" : "h3"} align="center">
-                {getMemberName({ accountMembership })}
-              </LakeHeading>
+                <LakeHeading level={1} variant={large ? "h1" : "h3"} align="center">
+                  {getMemberName({ accountMembership })}
+                </LakeHeading>
 
-              <Space height={8} />
+                <Space height={8} />
 
-              <LakeText color={colors.gray[700]}>
-                {t("membershipDetail.addedAt", {
-                  date: dayjs(accountMembership.createdAt).format("LL"),
-                })}
-              </LakeText>
-            </Box>
-          </Tile>
-        </ListRightPanelContent>
+                <LakeText color={colors.gray[700]}>
+                  {t("membershipDetail.addedAt", {
+                    date: dayjs(accountMembership.createdAt).format("LL"),
+                  })}
+                </LakeText>
+              </Box>
+            </Tile>
+          </ListRightPanelContent>
 
-        <Space height={24} />
+          <Space height={24} />
 
-        {match(accountMembership)
-          .with(
-            {
-              statusInfo: {
-                __typename: "AccountMembershipBindingUserErrorStatusInfo",
-                idVerifiedMatchError: P.not(true),
+          {match(accountMembership)
+            .with(
+              {
+                statusInfo: {
+                  __typename: "AccountMembershipBindingUserErrorStatusInfo",
+                  idVerifiedMatchError: P.not(true),
+                },
+                user: P.nonNullable,
               },
-              user: P.nonNullable,
-            },
-            accountMembership => (
-              <ListRightPanelContent large={large} style={styles.contents}>
-                <MembershipConflictResolutionEditor
-                  editingAccountMembershipId={editingAccountMembershipId}
-                  accountMembership={accountMembership}
-                  currentUserAccountMembershipId={currentUserAccountMembershipId}
-                  onAction={() => {
-                    onAccountMembershipUpdate();
-                    reload();
-                  }}
-                />
-              </ListRightPanelContent>
-            ),
-          )
-          .with(
-            {
-              statusInfo: {
-                __typename: P.union(
-                  "AccountMembershipDisabledStatusInfo",
-                  "AccountMembershipEnabledStatusInfo",
-                  "AccountMembershipBindingUserErrorStatusInfo",
-                  "AccountMembershipInvitationSentStatusInfo",
-                  "AccountMembershipSuspendedStatusInfo",
-                ),
+              accountMembership => (
+                <ListRightPanelContent large={large} style={styles.contents}>
+                  <MembershipConflictResolutionEditor
+                    editingAccountMembershipId={editingAccountMembershipId}
+                    accountMembership={accountMembership}
+                    currentUserAccountMembershipId={currentUserAccountMembershipId}
+                    onAction={() => {
+                      onAccountMembershipUpdate();
+                      reload();
+                    }}
+                  />
+                </ListRightPanelContent>
+              ),
+            )
+            .with(
+              {
+                statusInfo: {
+                  __typename: P.union(
+                    "AccountMembershipDisabledStatusInfo",
+                    "AccountMembershipEnabledStatusInfo",
+                    "AccountMembershipBindingUserErrorStatusInfo",
+                    "AccountMembershipInvitationSentStatusInfo",
+                    "AccountMembershipSuspendedStatusInfo",
+                  ),
+                },
               },
-            },
-            accountMembership => (
-              <>
-                <TabView
-                  sticky={true}
-                  padding={large ? 40 : 24}
-                  tabs={[
-                    {
-                      label: t("membershipDetail.details"),
-                      url: Router.AccountMembersDetailsRoot({
-                        ...params,
-                        accountMembershipId: currentUserAccountMembershipId,
-                        editingAccountMembershipId,
-                      }),
-                    },
-                    {
-                      label: t("membershipDetail.rights"),
-                      url: Router.AccountMembersDetailsRights({
-                        ...params,
-                        accountMembershipId: currentUserAccountMembershipId,
-                        editingAccountMembershipId,
-                      }),
-                    },
-                    ...match({ currentUserAccountMembership, accountMembership })
+              accountMembership => (
+                <>
+                  <TabView
+                    sticky={true}
+                    padding={large ? 40 : 24}
+                    tabs={[
+                      {
+                        label: t("membershipDetail.details"),
+                        url: Router.AccountMembersDetailsRoot({
+                          ...params,
+                          accountMembershipId: currentUserAccountMembershipId,
+                          editingAccountMembershipId,
+                        }),
+                      },
+                      {
+                        label: t("membershipDetail.rights"),
+                        url: Router.AccountMembersDetailsRights({
+                          ...params,
+                          accountMembershipId: currentUserAccountMembershipId,
+                          editingAccountMembershipId,
+                        }),
+                      },
+                      ...match({ currentUserAccountMembership, accountMembership })
+                        .with(
+                          P.union(
+                            {
+                              currentUserAccountMembership: { canManageCards: true },
+                            },
+                            {
+                              accountMembership: { id: currentUserAccountMembershipId },
+                            },
+                          ),
+                          () => [
+                            {
+                              label: t("membershipDetail.cards"),
+                              url: Router.AccountMembersDetailsCardList({
+                                ...params,
+                                accountMembershipId: currentUserAccountMembershipId,
+                                editingAccountMembershipId,
+                              }),
+                            },
+                          ],
+                        )
+                        .otherwise(() => []),
+                    ]}
+                    otherLabel={t("common.tabs.other")}
+                  />
+
+                  <ListRightPanelContent large={large} style={styles.contents}>
+                    {match({ route, currentUserAccountMembership, accountMembership })
                       .with(
-                        P.union(
-                          {
-                            currentUserAccountMembership: { canManageCards: true },
-                          },
-                          {
-                            accountMembership: { id: currentUserAccountMembershipId },
+                        { route: { name: "AccountMembersDetailsRoot" } },
+                        ({
+                          route: {
+                            params: { showInvitationLink },
                           },
+                        }) => (
+                          <MembershipDetailEditor
+                            accountCountry={accountCountry}
+                            editingAccountMembership={accountMembership}
+                            editingAccountMembershipId={editingAccountMembershipId}
+                            currentUserAccountMembership={currentUserAccountMembership}
+                            currentUserAccountMembershipId={currentUserAccountMembershipId}
+                            onRefreshRequest={() => {
+                              reload();
+                              onRefreshRequest();
+                            }}
+                            large={large}
+                            showInvitationLink={isNotNullishOrEmpty(showInvitationLink)}
+                          />
                         ),
-                        () => [
-                          {
-                            label: t("membershipDetail.cards"),
-                            url: Router.AccountMembersDetailsCardList({
-                              ...params,
-                              accountMembershipId: currentUserAccountMembershipId,
-                              editingAccountMembershipId,
-                            }),
-                          },
-                        ],
                       )
-                      .otherwise(() => []),
-                  ]}
-                  otherLabel={t("common.tabs.other")}
-                />
-
-                <ListRightPanelContent large={large} style={styles.contents}>
-                  {match({ route, currentUserAccountMembership, accountMembership })
-                    .with(
-                      { route: { name: "AccountMembersDetailsRoot" } },
-                      ({
-                        route: {
-                          params: { showInvitationLink },
-                        },
-                      }) => (
-                        <MembershipDetailEditor
+                      .with({ route: { name: "AccountMembersDetailsRights" } }, () => (
+                        <MembershipDetailRights
                           accountCountry={accountCountry}
                           editingAccountMembership={accountMembership}
                           editingAccountMembershipId={editingAccountMembershipId}
                           currentUserAccountMembership={currentUserAccountMembership}
                           currentUserAccountMembershipId={currentUserAccountMembershipId}
+                          requiresIdentityVerification={requiresIdentityVerification}
                           onRefreshRequest={() => {
                             reload();
                             onRefreshRequest();
                           }}
                           large={large}
-                          showInvitationLink={isNotNullishOrEmpty(showInvitationLink)}
                         />
-                      ),
-                    )
-                    .with({ route: { name: "AccountMembersDetailsRights" } }, () => (
-                      <MembershipDetailRights
-                        accountCountry={accountCountry}
-                        editingAccountMembership={accountMembership}
-                        editingAccountMembershipId={editingAccountMembershipId}
-                        currentUserAccountMembership={currentUserAccountMembership}
-                        currentUserAccountMembershipId={currentUserAccountMembershipId}
-                        requiresIdentityVerification={requiresIdentityVerification}
-                        onRefreshRequest={() => {
-                          reload();
-                          onRefreshRequest();
-                        }}
-                        large={large}
-                      />
-                    ))
-                    .with(
-                      P.union(
-                        {
-                          route: { name: "AccountMembersDetailsCardList" },
-                          currentUserAccountMembership: { canManageCards: true },
-                        },
-                        {
-                          route: { name: "AccountMembersDetailsCardList" },
-                          accountMembership: { id: currentUserAccountMembershipId },
-                        },
-                      ),
-                      ({
-                        route: {
-                          params: {
-                            accountMembershipId,
-                            editingAccountMembershipId,
-                            newCard: isCardWizardOpen,
-                            ...params
+                      ))
+                      .with(
+                        P.union(
+                          {
+                            route: { name: "AccountMembersDetailsCardList" },
+                            currentUserAccountMembership: { canManageCards: true },
                           },
-                        },
-                      }) => (
-                        <View style={large ? styles.cardListLarge : styles.cardList}>
-                          <AccountMembersDetailsCardList
-                            canAddCard={canAddCard}
-                            editingAccountMembershipId={editingAccountMembershipId}
-                            editingAccountMembership={accountMembership}
-                            currentUserAccountMembership={currentUserAccountMembership}
-                            currentUserAccountMembershipId={currentUserAccountMembershipId}
-                            totalDisplayableCardCount={accountMembership.allCards.totalCount}
-                            params={params}
-                            isCardWizardOpen={isCardWizardOpen != null}
-                            physicalCardOrderVisible={physicalCardOrderVisible}
-                          />
-                        </View>
-                      ),
-                    )
-                    .otherwise(() => null)}
-                </ListRightPanelContent>
-              </>
-            ),
-          )
-          .otherwise(() => (
-            <ErrorView />
-          ))}
-      </View>
-    </ScrollView>
-  );
+                          {
+                            route: { name: "AccountMembersDetailsCardList" },
+                            accountMembership: { id: currentUserAccountMembershipId },
+                          },
+                        ),
+                        ({
+                          route: {
+                            params: {
+                              accountMembershipId,
+                              editingAccountMembershipId,
+                              newCard: isCardWizardOpen,
+                              ...params
+                            },
+                          },
+                        }) => (
+                          <View style={large ? styles.cardListLarge : styles.cardList}>
+                            <AccountMembersDetailsCardList
+                              canAddCard={canAddCard}
+                              editingAccountMembershipId={editingAccountMembershipId}
+                              editingAccountMembership={accountMembership}
+                              currentUserAccountMembership={currentUserAccountMembership}
+                              currentUserAccountMembershipId={currentUserAccountMembershipId}
+                              totalDisplayableCardCount={accountMembership.allCards.totalCount}
+                              params={params}
+                              isCardWizardOpen={isCardWizardOpen != null}
+                              physicalCardOrderVisible={physicalCardOrderVisible}
+                            />
+                          </View>
+                        ),
+                      )
+                      .otherwise(() => null)}
+                  </ListRightPanelContent>
+                </>
+              ),
+            )
+            .otherwise(() => (
+              <ErrorView />
+            ))}
+        </View>
+      </ScrollView>;
+    })
+    .exhaustive();
 };
diff --git a/clients/banking/src/components/MembershipInvitationLinkModal.tsx b/clients/banking/src/components/MembershipInvitationLinkModal.tsx
index c3012dcc1..00ee99420 100644
--- a/clients/banking/src/components/MembershipInvitationLinkModal.tsx
+++ b/clients/banking/src/components/MembershipInvitationLinkModal.tsx
@@ -3,9 +3,10 @@ import { Box } from "@swan-io/lake/src/components/Box";
 import { LakeLabel } from "@swan-io/lake/src/components/LakeLabel";
 import { LakeTextInput } from "@swan-io/lake/src/components/LakeTextInput";
 import { Space } from "@swan-io/lake/src/components/Space";
+import { useDeferredUrqlQuery } from "@swan-io/lake/src/hooks/useUrqlQuery";
 import { LakeModal } from "@swan-io/shared-business/src/components/LakeModal";
+import { useEffect } from "react";
 import { P, match } from "ts-pattern";
-import { useQuery } from "urql";
 import { MembershipDetailDocument } from "../graphql/partner";
 import { getMemberName } from "../utils/accountMembership";
 import { t } from "../utils/i18n";
@@ -17,11 +18,14 @@ type Props = {
   onPressClose: () => void;
 };
 export const MembershipInvitationLinkModal = ({ accountMembershipId, onPressClose }: Props) => {
-  const [{ data }] = useQuery({
-    query: MembershipDetailDocument,
-    variables: { accountMembershipId: accountMembershipId as string },
-    pause: accountMembershipId == null,
-  });
+  const { data, query } = useDeferredUrqlQuery(MembershipDetailDocument);
+
+  useEffect(() => {
+    if (accountMembershipId != null) {
+      const request = query({ accountMembershipId });
+      return () => request.cancel();
+    }
+  }, [accountMembershipId]);
 
   const value = match(projectConfiguration)
     .with(
@@ -31,20 +35,21 @@ export const MembershipInvitationLinkModal = ({ accountMembershipId, onPressClos
     )
     .otherwise(() => `${__env.BANKING_URL}/api/invitation/${accountMembershipId ?? ""}`);
 
-  const accountMembership = data?.accountMembership;
-
   return (
     <LakeModal
       visible={accountMembershipId != null}
       onPressClose={onPressClose}
       icon="link-filled"
-      title={
-        accountMembership == null
-          ? t("members.invitationTitle")
-          : t("members.invitationTitle.name", {
-              fullName: getMemberName({ accountMembership }),
-            })
-      }
+      title={data
+        .toOption()
+        .flatMap(result => result.toOption())
+        .flatMap(data => Option.fromNullable(data.accountMembership))
+        .map(accountMembership =>
+          t("members.invitationTitle.name", {
+            fullName: getMemberName({ accountMembership }),
+          }),
+        )
+        .getWithDefault(t("members.invitationTitle"))}
     >
       <LakeLabel
         label={t("members.invitationLink")}
diff --git a/clients/banking/src/pages/AccountDetailsSettingsPage.tsx b/clients/banking/src/pages/AccountDetailsSettingsPage.tsx
index aee36bc78..7d6581327 100644
--- a/clients/banking/src/pages/AccountDetailsSettingsPage.tsx
+++ b/clients/banking/src/pages/AccountDetailsSettingsPage.tsx
@@ -15,6 +15,7 @@ import { Tile, TileGrid } from "@swan-io/lake/src/components/Tile";
 import { TilePlaceholder } from "@swan-io/lake/src/components/TilePlaceholder";
 import { commonStyles } from "@swan-io/lake/src/constants/commonStyles";
 import { colors, spacings } from "@swan-io/lake/src/constants/design";
+import { useUrqlMutation } from "@swan-io/lake/src/hooks/useUrqlMutation";
 import { useUrqlQuery } from "@swan-io/lake/src/hooks/useUrqlQuery";
 import { showToast } from "@swan-io/lake/src/state/toasts";
 import {
@@ -23,7 +24,7 @@ import {
   isNullish,
   isNullishOrEmpty,
 } from "@swan-io/lake/src/utils/nullish";
-import { filterRejectionsToPromise, parseOperationResult } from "@swan-io/lake/src/utils/urql";
+import { filterRejectionsToResult } from "@swan-io/lake/src/utils/urql";
 import { TaxIdentificationNumberInput } from "@swan-io/shared-business/src/components/TaxIdentificationNumberInput";
 import { CountryCCA3 } from "@swan-io/shared-business/src/constants/countries";
 import { translateError } from "@swan-io/shared-business/src/utils/i18n";
@@ -35,7 +36,6 @@ import { ReactNode, useMemo } from "react";
 import { ScrollView, StyleSheet, View } from "react-native";
 import { combineValidators, hasDefinedKeys, toOptionalValidator, useForm } from "react-ux-form";
 import { P, match } from "ts-pattern";
-import { useMutation } from "urql";
 import { ErrorView } from "../components/ErrorView";
 import {
   AccountDetailsSettingsPageDocument,
@@ -108,7 +108,7 @@ const UpdateAccountForm = ({
   canManageAccountMembership: boolean;
 }) => {
   const accountCountry = account.country ?? "FRA";
-  const [, updateAccount] = useMutation(UpdateAccountDocument);
+  const [, updateAccount] = useUrqlMutation(UpdateAccountDocument);
 
   const holderInfo = account.holder.info;
   const isCompany = holderInfo?.__typename === "AccountHolderCompanyInfo";
@@ -344,16 +344,16 @@ const UpdateAccountForm = ({
                       taxIdentificationNumber,
                     },
                   })
-                    .then(parseOperationResult)
-                    .then(({ updateAccount, updateAccountHolder }) =>
-                      Promise.all([
-                        filterRejectionsToPromise(updateAccount),
-                        filterRejectionsToPromise(updateAccountHolder),
+                    .mapOkToResult(({ updateAccount, updateAccountHolder }) =>
+                      Result.all([
+                        filterRejectionsToResult(updateAccount),
+                        filterRejectionsToResult(updateAccountHolder),
                       ]),
                     )
-                    .catch((error: unknown) => {
+                    .tapError((error: unknown) => {
                       showToast({ variant: "error", error, title: translateError(error) });
-                    });
+                    })
+                    .toPromise();
                 }
               });
             }}
diff --git a/clients/banking/src/pages/AccountDetailsVirtualIbansPage.tsx b/clients/banking/src/pages/AccountDetailsVirtualIbansPage.tsx
index 4a38e2a23..f531a9a78 100644
--- a/clients/banking/src/pages/AccountDetailsVirtualIbansPage.tsx
+++ b/clients/banking/src/pages/AccountDetailsVirtualIbansPage.tsx
@@ -1,3 +1,4 @@
+import { Option } from "@swan-io/boxed";
 import {
   FixedListViewEmpty,
   PlainListViewPlaceholder,
@@ -17,17 +18,17 @@ import { commonStyles } from "@swan-io/lake/src/constants/commonStyles";
 import { breakpoints, spacings } from "@swan-io/lake/src/constants/design";
 import { useBoolean } from "@swan-io/lake/src/hooks/useBoolean";
 import { useResponsive } from "@swan-io/lake/src/hooks/useResponsive";
+import { useUrqlMutation } from "@swan-io/lake/src/hooks/useUrqlMutation";
 import { useUrqlPaginatedQuery } from "@swan-io/lake/src/hooks/useUrqlQuery";
 import { showToast } from "@swan-io/lake/src/state/toasts";
 import { GetEdge } from "@swan-io/lake/src/utils/types";
-import { filterRejectionsToPromise, parseOperationResult } from "@swan-io/lake/src/utils/urql";
+import { filterRejectionsToResult } from "@swan-io/lake/src/utils/urql";
 import { LakeModal } from "@swan-io/shared-business/src/components/LakeModal";
 import { translateError } from "@swan-io/shared-business/src/utils/i18n";
 import { printIbanFormat } from "@swan-io/shared-business/src/utils/validation";
 import { useMemo } from "react";
 import { StyleSheet, View } from "react-native";
 import { match } from "ts-pattern";
-import { useMutation } from "urql";
 import { ErrorView } from "../components/ErrorView";
 import {
   AccountDetailsVirtualIbansPageDocument,
@@ -176,18 +177,17 @@ const smallColumns: ColumnConfig<Edge, ExtraInfo>[] = [
 
 const Actions = ({ onCancel, virtualIbanId }: { onCancel: () => void; virtualIbanId: string }) => {
   const [modalVisible, setModalVisible] = useBoolean(false);
-  const [{ fetching }, cancelVirtualIban] = useMutation(CancelVirtualIbanDocument);
+  const [virtualIbanCancelation, cancelVirtualIban] = useUrqlMutation(CancelVirtualIbanDocument);
 
   const onPressCancel = () => {
     cancelVirtualIban({ virtualIbanId })
-      .then(parseOperationResult)
-      .then(data => data.cancelVirtualIbanEntry)
-      .then(filterRejectionsToPromise)
-      .then(onCancel)
-      .catch((error: unknown) =>
+      .mapOkToResult(data => Option.fromNullable(data.cancelVirtualIbanEntry).toResult(undefined))
+      .mapOkToResult(filterRejectionsToResult)
+      .tapOk(onCancel)
+      .tapError((error: unknown) =>
         showToast({ variant: "error", error, title: translateError(error) }),
       )
-      .finally(setModalVisible.off);
+      .tap(setModalVisible.off);
   };
 
   return (
@@ -211,7 +211,12 @@ const Actions = ({ onCancel, virtualIbanId }: { onCancel: () => void; virtualIba
         <Space height={16} />
 
         <LakeButtonGroup paddingBottom={0}>
-          <LakeButton loading={fetching} grow={true} color="negative" onPress={onPressCancel}>
+          <LakeButton
+            loading={virtualIbanCancelation.isLoading()}
+            grow={true}
+            color="negative"
+            onPress={onPressCancel}
+          >
             {t("accountDetails.virtualIbans.cancelVirtualIban")}
           </LakeButton>
         </LakeButtonGroup>
@@ -225,7 +230,7 @@ const keyExtractor = ({ node: { id } }: Edge) => id;
 export const AccountDetailsVirtualIbansPage = ({ accountId }: Props) => {
   // use useResponsive to fit with scroll behavior set in AccountArea
   const { desktop } = useResponsive();
-  const [{ fetching: adding }, addVirtualIban] = useMutation(AddVirtualIbanDocument);
+  const [virtualIbanAddition, addVirtualIban] = useUrqlMutation(AddVirtualIbanDocument);
 
   const { data, nextData, reload, setAfter } = useUrqlPaginatedQuery(
     {
@@ -237,12 +242,10 @@ export const AccountDetailsVirtualIbansPage = ({ accountId }: Props) => {
 
   const onPressNew = () => {
     addVirtualIban({ accountId })
-      .then(parseOperationResult)
-      .then(data => data.addVirtualIbanEntry)
-      .then(data => data ?? Promise.reject())
-      .then(filterRejectionsToPromise)
-      .then(reload)
-      .catch((error: unknown) => {
+      .mapOkToResult(data => Option.fromNullable(data.addVirtualIbanEntry).toResult(undefined))
+      .mapOkToResult(filterRejectionsToResult)
+      .tapOk(reload)
+      .tapError((error: unknown) => {
         showToast({ variant: "error", error, title: translateError(error) });
       });
   };
@@ -273,7 +276,7 @@ export const AccountDetailsVirtualIbansPage = ({ accountId }: Props) => {
                     {edges.length > 0 && unlimited && (
                       <View style={[styles.header, large && styles.headerDesktop]}>
                         <LakeButton
-                          loading={adding}
+                          loading={virtualIbanAddition.isLoading()}
                           icon="add-circle-filled"
                           size="small"
                           color="current"
@@ -309,7 +312,7 @@ export const AccountDetailsVirtualIbansPage = ({ accountId }: Props) => {
                           {unlimited && (
                             <LakeButtonGroup justifyContent="center">
                               <LakeButton
-                                loading={adding}
+                                loading={virtualIbanAddition.isLoading()}
                                 icon="add-circle-filled"
                                 size="small"
                                 color="current"