richie-education 2.24.0 → 2.25.0-b2.dev101

package/js/hooks/useResources/useResourcesRoot.ts

@@ -11,7 +11,7 @@ import { noop } from 'utils';
 import { ApiResourceInterface, PaginatedResponse } from 'types/Joanie';
 import useLocalizedQueryKey from 'utils/react-query/useLocalizedQueryKey';
 import usePrevious from 'hooks/usePrevious';
-import { Resource, ResourcesQuery, UseResourcesProps } from './index';
+import { Resource, ResourcesQuery, UseResourcesCallbackProps } from './index';
 
 export const messages = defineMessages({
   errorGet: {
@@ -74,7 +74,7 @@ export const useResourcesRoot = <
   localized,
   messages: resourceMessages,
   onMutationSuccess,
-}: UseResourcesProps<TData, TResourceQuery, TApiResource>) => {
+}: UseResourcesCallbackProps<TData, TResourceQuery, TApiResource>) => {
   const queryClient = useQueryClient();
   const [error, setError] = useState<Maybe<string>>();
   const intl = useIntl();
@@ -92,13 +92,12 @@ export const useResourcesRoot = <
   const api = apiInterface();
 
   const queryFn: () => Promise<any> = useCallback(
-    () => api.get(filters),
+    () =>
+      api.get(filters).catch(() => {
+        setError(intl.formatMessage(actualMessages.errorGet));
+      }),
     [api, JSON.stringify(filters)],
   );
-  queryOptions = {
-    onError: () => setError(intl.formatMessage(actualMessages.errorGet)),
-    ...queryOptions,
-  };
 
   if (session !== usePrevious(session)) {
     throw new Error('session must never change value.');
@@ -108,7 +107,7 @@ export const useResourcesRoot = <
   if (session) {
     [readHandler, ACTUAL_QUERY_KEY] = useSessionQuery(QUERY_KEY, queryFn, queryOptions as any);
   } else {
-    readHandler = useQuery(QUERY_KEY, queryFn, queryOptions);
+    readHandler = useQuery({ queryKey: QUERY_KEY, queryFn, ...queryOptions });
   }
 
   const invalidate = async () => {
@@ -119,7 +118,9 @@ export const useResourcesRoot = <
   };
 
   const prefetch = async () => {
-    await queryClient.prefetchQuery(ACTUAL_QUERY_KEY, queryFn, {
+    await queryClient.prefetchQuery({
+      queryFn,
+      queryKey: ACTUAL_QUERY_KEY,
       staleTime: session
         ? REACT_QUERY_SETTINGS.staleTimes.sessionItems
         : REACT_QUERY_SETTINGS.staleTimes.default,
@@ -136,19 +137,22 @@ export const useResourcesRoot = <
 
   const writeHandlers = {
     create: api.create
-      ? mutation(api.create, {
+      ? mutation({
+          mutationFn: api.create,
           onSuccess,
           onError: () => setError(intl.formatMessage(actualMessages.errorCreate)),
         })
       : undefined,
     update: api.update
-      ? mutation(api.update, {
+      ? mutation({
+          mutationFn: api.update,
           onSuccess,
           onError: () => setError(intl.formatMessage(actualMessages.errorUpdate)),
         })
       : undefined,
     delete: api.delete
-      ? mutation(api.delete, {
+      ? mutation({
+          mutationFn: api.delete,
           onSuccess,
           onError: () => setError(intl.formatMessage(actualMessages.errorDelete)),
         })
@@ -178,7 +182,7 @@ export const useResourcesRoot = <
           pagination: {
             count: readHandler.data.count,
             next: readHandler.data.next,
-            prev: readHandler.data.previous,
+            previous: readHandler.data.previous,
           },
         },
       };
@@ -214,10 +218,10 @@ export const useResourcesRoot = <
     },
     states: {
       fetching: readHandler.fetchStatus === 'fetching',
-      creating: writeHandlers.create?.isLoading,
-      deleting: writeHandlers.delete?.isLoading,
-      updating: writeHandlers.update?.isLoading,
-      isLoading: [...Object.values(writeHandlers), readHandler].some((value) => value?.isLoading),
+      creating: writeHandlers.create?.isPending,
+      deleting: writeHandlers.delete?.isPending,
+      updating: writeHandlers.update?.isPending,
+      isPending: [...Object.values(writeHandlers), readHandler].some((value) => value?.isPending),
       isFetched: readHandler.isFetched,
       error,
     },

package/js/hooks/useTeacherPendingContractsCount/index.ts

@@ -0,0 +1,34 @@
+import { useOrganizationContracts } from 'hooks/useContracts';
+import { PER_PAGE } from 'settings';
+import { ContractState, CourseProductRelation, Organization } from 'types/Joanie';
+
+interface UseTeacherPendingContractsCountProps {
+  organizationId?: Organization['id'];
+  courseProductRelationId?: CourseProductRelation['id'];
+}
+
+const useTeacherPendingContractsCount = ({
+  organizationId,
+  courseProductRelationId,
+}: UseTeacherPendingContractsCountProps) => {
+  const { items: contracts, meta } = useOrganizationContracts({
+    organization_id: organizationId,
+    course_product_relation_id: courseProductRelationId,
+    signature_state: ContractState.LEARNER_SIGNED,
+    page: 1,
+    page_size: PER_PAGE.teacherContractList,
+  });
+
+  if (organizationId) {
+    return {
+      contracts,
+      pendingContractCount: meta?.pagination?.count ?? 0,
+    };
+  }
+  return {
+    contracts: [],
+    pendingContractCount: 0,
+  };
+};
+
+export default useTeacherPendingContractsCount;

package/js/hooks/useUnionResource/index.spec.tsx

@@ -12,7 +12,7 @@ import { Deferred } from 'utils/test/deferred';
 import { noop } from 'utils';
 import { mockPaginatedResponse } from 'utils/test/mockPaginatedResponse';
 import { PER_PAGE } from 'settings';
-import { HttpError } from 'utils/errors/HttpError';
+import { HttpError, HttpStatusCode } from 'utils/errors/HttpError';
 import { FetchEntityData } from './utils/fetchEntities';
 import { QueryConfig, FetchDataFunction } from './utils/fetchEntity';
 import useUnionResource from '.';
@@ -151,6 +151,7 @@ describe('useUnionResource', () => {
       PaginatedResourceQuery
     >(queryAConfig, queryBConfig);
     expect(result.current.isLoading).toBe(true);
+    expect(result.current.hasMore).toBe(false);
 
     await act(() => {
       dataADeferred.resolve(mockPaginatedResponse([], 0, false));
@@ -305,7 +306,9 @@ describe('useUnionResource', () => {
     expect(result.current.isLoading).toBe(true);
 
     await act(() => {
-      dataADeferred.reject(new HttpError(500, 'Bad request'));
+      dataADeferred.reject(
+        new HttpError(HttpStatusCode.INTERNAL_SERVER_ERROR, 'Internal Server Error'),
+      );
     });
     expect(result.current.isLoading).toBe(false);
     expect(result.current.error).toBe('An error occurred while fetching data. Please retry later.');

package/js/hooks/useUnionResource/index.ts

@@ -4,6 +4,7 @@ import { MessageDescriptor, defineMessages, useIntl } from 'react-intl';
 import { Maybe } from 'yup';
 import { PaginatedResourceQuery, PaginatedResponse } from 'types/Joanie';
 import { PER_PAGE } from 'settings';
+import { useQueryKeyInvalidateListener } from 'hooks/useQueryKeyInvalidateListener';
 import { syncIntegrityCount } from './utils/syncIntegrityCount';
 import { FetchEntityData } from './utils/fetchEntities';
 import { QueryConfig } from './utils/fetchEntity';
@@ -39,6 +40,7 @@ interface UseUnionResourceProps<DataA, DataB, FiltersA, FiltersB>
   queryAConfig: QueryConfig<DataA, FiltersA>;
   queryBConfig: QueryConfig<DataB, FiltersB>;
   errorGetMessage?: MessageDescriptor;
+  refetchOnInvalidation?: boolean;
 }
 
 /**
@@ -58,6 +60,7 @@ const useUnionResource = <
   queryBConfig,
   perPage = PER_PAGE.useUnionResources,
   errorGetMessage = messages.errorGet,
+  refetchOnInvalidation = true,
 }: UseUnionResourceProps<DataA, DataB, FiltersA, FiltersB>): UseUnionResourceReturns<
   DataA,
   DataB
@@ -69,7 +72,7 @@ const useUnionResource = <
   const [totalCount, setTotalCount] = useState<number | undefined>();
   const [error, setError] = useState<Maybe<string>>();
 
-  // cursor is the total amount of entities what we whant to display.
+  // cursor is the total amount of entities what we want to display.
   const [cursor, setCursor] = useState(perPage);
 
   // integrityCount is the number of fetched entities A and B that are correctly ordered.
@@ -87,6 +90,20 @@ const useUnionResource = <
   const eofRef = useRef<Record<string, number>>(queryClient.getQueryData(eofQueryKey) ?? {});
   log('eof', eofRef.current);
 
+  const reset = () => {
+    setStack([]);
+    setPage(0);
+    setTotalCount(undefined);
+    setError(undefined);
+    setCursor(perPage);
+    setIntegrityCount(0);
+  };
+
+  if (refetchOnInvalidation) {
+    useQueryKeyInvalidateListener(queryAConfig.queryKey, reset);
+    useQueryKeyInvalidateListener(queryBConfig.queryKey, reset);
+  }
+
   useEffect(() => {
     async function fetchNewPage() {
       const {
@@ -132,7 +149,7 @@ const useUnionResource = <
       setIsSyncing(true);
       fetchNewPage();
     }
-  }, [cursor]);
+  }, [cursor, stack.length]); // stack.length is added in the dependency array to force a new fetch on reset.
 
   const cursorToUse = Math.min(cursor, integrityCount);
   const next = () => {
@@ -147,7 +164,7 @@ const useUnionResource = <
     next,
     count: totalCount,
     data: stack.slice(0, cursorToUse),
-    hasMore: typeof totalCount === 'undefined' || cursorToUse < totalCount,
+    hasMore: totalCount ? cursorToUse < totalCount : false,
     error,
     isLoading: isSyncing,
   };

package/js/hooks/useUnionResource/utils/fetchEntity.ts

@@ -2,7 +2,7 @@ import { QueryClient } from '@tanstack/query-core';
 import { PaginatedResourceQuery, PaginatedResponse } from 'types/Joanie';
 import { Maybe } from 'types/utils';
 import { REACT_QUERY_SETTINGS } from 'settings';
-import { isHttpError } from 'utils/errors/HttpError';
+import { HttpStatusCode, isHttpError } from 'utils/errors/HttpError';
 
 export type FetchDataFunction<Data, FetchDataFilter> = (
   filters: FetchDataFilter,
@@ -53,7 +53,8 @@ export const fetchEntity = async <
   // Here we need to mimic the behavior of staleTime, which does not seems to be implemented when using `getQueryData`.
   if (
     state &&
-    state.dataUpdatedAt >= new Date().getTime() - REACT_QUERY_SETTINGS.staleTimes.sessionItems
+    state.dataUpdatedAt >= new Date().getTime() - REACT_QUERY_SETTINGS.staleTimes.sessionItems &&
+    !state.isInvalidated
   ) {
     data = state.data;
   }
@@ -75,8 +76,8 @@ export const fetchEntity = async <
     return res;
   } catch (err) {
     if (isHttpError(err)) {
-      if (err.code === 401) {
-        queryClient.invalidateQueries(['user'], { exact: true });
+      if (err.code === HttpStatusCode.UNAUTHORIZED) {
+        queryClient.invalidateQueries({ queryKey: ['user'], exact: true });
       }
       throw err;
     }

package/js/index.tsx

@@ -53,8 +53,8 @@ async function render() {
       if (!Intl.PluralRules) {
         await import('intl-pluralrules');
       }
-      // TODO: remove type assertion when typescript libs include RelativeTimeFormat
-      if (!(Intl as any).RelativeTimeFormat) {
+
+      if (!Intl.RelativeTimeFormat) {
         await import('@formatjs/intl-relativetimeformat');
 
         // When countryCode is identical to languageCode, intlrelativeformat uses

package/js/pages/DashboardAddressesManagement/DashboardAddressBox.tsx

@@ -1,5 +1,5 @@
 import { defineMessages, FormattedMessage } from 'react-intl';
-import { Button } from 'components/Button';
+import { Button } from '@openfun/cunningham-react';
 import { DashboardBox } from 'widgets/Dashboard/components/DashboardBox';
 import { Address } from 'types/Joanie';
 

package/js/pages/DashboardAddressesManagement/DashboardCreateAddress.spec.tsx

@@ -1,7 +1,10 @@
 import { QueryClientProvider } from '@tanstack/react-query';
+import countries from 'i18n-iso-countries';
 import fetchMock from 'fetch-mock';
-import { act, findByText, fireEvent, render, screen } from '@testing-library/react';
+import { getByText, render, screen, waitFor } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
+import userEvent, { UserEvent } from '@testing-library/user-event';
+import { PropsWithChildren } from 'react';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import { AddressFactory } from 'utils/test/factories/joanie';
 import { SessionProvider } from 'contexts/SessionContext';
@@ -12,6 +15,8 @@ import { expectFetchCall } from 'utils/test/expectFetchCall';
 import { expectBreadcrumbsToEqualParts } from 'utils/test/expectBreadcrumbsToEqualParts';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { expectBannerError } from 'utils/test/expectBanner';
+import { changeSelect } from 'components/Form/test-utils';
+import { HttpStatusCode } from 'utils/errors/HttpError';
 
 jest.mock('utils/context', () => ({
   __esModule: true,
@@ -29,28 +34,38 @@ jest.mock('utils/indirection/window', () => ({
  * Fills the form with `address` data.
  * @param address
  */
-const fillForm = async (address: Address) => {
-  const titleInput = await screen.findByRole('textbox', { name: 'Address title' });
-  const firstnameInput = screen.getByRole('textbox', { name: "Recipient's first name" });
-  const lastnameInput = screen.getByRole('textbox', { name: "Recipient's last name" });
-  const addressInput = screen.getByRole('textbox', { name: 'Address' });
-  const cityInput = screen.getByRole('textbox', { name: 'City' });
-  const postcodeInput = screen.getByRole('textbox', { name: 'Postcode' });
-  const countryInput = screen.getByRole('combobox', { name: 'Country' });
-
-  await act(async () => {
-    fireEvent.input(titleInput, { target: { value: address?.title } });
-    fireEvent.change(firstnameInput, { target: { value: address?.first_name } });
-    fireEvent.change(lastnameInput, { target: { value: address?.last_name } });
-    fireEvent.change(addressInput, { target: { value: address?.address } });
-    fireEvent.change(cityInput, { target: { value: address?.city } });
-    fireEvent.change(postcodeInput, { target: { value: address?.postcode } });
-    fireEvent.change(countryInput, { target: { value: address?.country } });
-  });
+const fillForm = async (address: Address, user: UserEvent = userEvent.setup()) => {
+  const $titleInput = await screen.findByRole('textbox', { name: 'Address title' });
+  const $firstnameInput = screen.getByRole('textbox', { name: "Recipient's first name" });
+  const $lastnameInput = screen.getByRole('textbox', { name: "Recipient's last name" });
+  const $addressInput = screen.getByRole('textbox', { name: 'Address' });
+  const $cityInput = screen.getByRole('textbox', { name: 'City' });
+  const $postcodeInput = screen.getByRole('textbox', { name: 'Postcode' });
+  const $countryInput = screen.getByRole('combobox', { name: 'Country' });
+
+  await user.type($titleInput, address?.title);
+  await user.type($firstnameInput, address?.first_name);
+  await user.type($lastnameInput, address?.last_name);
+  await user.type($addressInput, address?.address);
+  await user.type($cityInput, address?.city);
+  await user.type($postcodeInput, address?.postcode);
+  await changeSelect($countryInput, countries.getName(address?.country, 'en')!, user);
+
+  return Promise.resolve();
 };
 
 describe('<DashboardCreateAddress/>', () => {
+  const Wrapper = ({ children }: PropsWithChildren) => (
+    <QueryClientProvider client={createTestQueryClient({ user: true })}>
+      <IntlProvider locale="en">
+        <SessionProvider>{children}</SessionProvider>
+      </IntlProvider>
+    </QueryClientProvider>
+  );
+  let user: UserEvent;
+
   beforeEach(() => {
+    user = userEvent.setup();
     fetchMock.get('https://joanie.endpoint/api/v1.0/orders/', []);
     fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', []);
   });
@@ -62,27 +77,23 @@ describe('<DashboardCreateAddress/>', () => {
 
   it('renders error for each field', async () => {
     fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', []);
-    await act(async () => {
-      render(
-        <QueryClientProvider client={createTestQueryClient({ user: true })}>
-          <IntlProvider locale="en">
-            <SessionProvider>
-              <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES_ADDRESS_CREATION} />
-            </SessionProvider>
-          </IntlProvider>
-        </QueryClientProvider>,
+    render(
+      <Wrapper>
+        <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES_ADDRESS_CREATION} />
+      </Wrapper>,
+    );
+    await waitFor(() => {
+      expect(fetchMock.calls().map((call) => call[0])).toContain(
+        'https://joanie.endpoint/api/v1.0/addresses/',
       );
     });
 
     // It doesn't show any errors.
     expect(screen.queryByText('An error occurred', { exact: false })).toBeNull();
-    expectBreadcrumbsToEqualParts(['Back', 'My preferences', 'Create address']);
+    expectBreadcrumbsToEqualParts(['chevron_leftBack', 'My preferences', 'Create address']);
 
     // Submit the empty form to trigger validation errors.
-    const button = await screen.findByRole('button', { name: 'Create' });
-    await act(async () => {
-      fireEvent.click(button);
-    });
+    await user.click(screen.getByRole('button', { name: 'Create' }));
 
     const titleInput = screen.getByRole('textbox', { name: 'Address title' });
     const firstnameInput = screen.getByRole('textbox', { name: "Recipient's first name" });
@@ -92,13 +103,13 @@ describe('<DashboardCreateAddress/>', () => {
     const postcodeInput = screen.getByRole('textbox', { name: 'Postcode' });
     const countryInput = screen.getByRole('combobox', { name: 'Country' });
 
-    await findByText(titleInput.closest('.form-field')!, 'This field is required.');
-    await findByText(firstnameInput.closest('.form-field')!, 'This field is required.');
-    await findByText(lastnameInput.closest('.form-field')!, 'This field is required.');
-    await findByText(addressInput.closest('.form-field')!, 'This field is required.');
-    await findByText(cityInput.closest('.form-field')!, 'This field is required.');
-    await findByText(postcodeInput.closest('.form-field')!, 'This field is required.');
-    await findByText(countryInput.closest('.form-field')!, 'You must select a value.');
+    getByText(titleInput.closest('.c__field')!, 'This field is required.');
+    getByText(firstnameInput.closest('.c__field')!, 'This field is required.');
+    getByText(lastnameInput.closest('.c__field')!, 'This field is required.');
+    getByText(addressInput.closest('.c__field')!, 'This field is required.');
+    getByText(cityInput.closest('.c__field')!, 'This field is required.');
+    getByText(postcodeInput.closest('.c__field')!, 'This field is required.');
+    getByText(countryInput.closest('.c__field')!, 'You must select a value.');
 
     // The create API route is not called.
     expect(
@@ -112,31 +123,28 @@ describe('<DashboardCreateAddress/>', () => {
   it('creates an address and redirect to preferences', async () => {
     fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', []);
     fetchMock.post('https://joanie.endpoint/api/v1.0/addresses/', []);
-    await act(async () => {
-      render(
-        <QueryClientProvider client={createTestQueryClient({ user: true })}>
-          <IntlProvider locale="en">
-            <SessionProvider>
-              <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES_ADDRESS_CREATION} />
-            </SessionProvider>
-          </IntlProvider>
-        </QueryClientProvider>,
+    render(
+      <Wrapper>
+        <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES_ADDRESS_CREATION} />
+      </Wrapper>,
+    );
+    await waitFor(() => {
+      expect(fetchMock.calls().map((call) => call[0])).toContain(
+        'https://joanie.endpoint/api/v1.0/addresses/',
       );
     });
-    expectBreadcrumbsToEqualParts(['Back', 'My preferences', 'Create address']);
+    expectBreadcrumbsToEqualParts(['chevron_leftBack', 'My preferences', 'Create address']);
 
     // Fill the form with random data.
-    const button = await screen.findByRole('button', { name: 'Create' });
     const address = AddressFactory().one();
-    await fillForm(address);
+    await fillForm(address, user);
 
     // Form submit calls the API create route.
     expect(
       fetchMock.called('https://joanie.endpoint/api/v1.0/addresses/', { method: 'post' }),
     ).toBe(false);
-    await act(async () => {
-      fireEvent.click(button);
-    });
+    await user.click(screen.getByRole('button', { name: 'Create' }));
+
     expect(
       fetchMock.called('https://joanie.endpoint/api/v1.0/addresses/', { method: 'post' }),
     ).toBe(true);
@@ -152,8 +160,9 @@ describe('<DashboardCreateAddress/>', () => {
       },
     );
 
-    // It is redirected to the addresses list.
-    await screen.findByText('Billing addresses');
+    await waitFor(() => {
+      expect(screen.getByText('Billing addresses')).toBeInTheDocument();
+    });
   });
 
   it('shows an error in case of API error', async () => {
@@ -161,26 +170,24 @@ describe('<DashboardCreateAddress/>', () => {
 
     // Mock the create API route to return a 500 status.
     fetchMock.post('https://joanie.endpoint/api/v1.0/addresses/', {
-      status: 500,
+      status: HttpStatusCode.INTERNAL_SERVER_ERROR,
       body: 'Bad request',
     });
 
-    await act(async () => {
-      render(
-        <QueryClientProvider client={createTestQueryClient({ user: true })}>
-          <IntlProvider locale="en">
-            <SessionProvider>
-              <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES_ADDRESS_CREATION} />
-            </SessionProvider>
-          </IntlProvider>
-        </QueryClientProvider>,
+    render(
+      <Wrapper>
+        <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES_ADDRESS_CREATION} />
+      </Wrapper>,
+    );
+    await waitFor(() => {
+      expect(fetchMock.calls().map((call) => call[0])).toContain(
+        'https://joanie.endpoint/api/v1.0/addresses/',
       );
     });
 
-    expectBreadcrumbsToEqualParts(['Back', 'My preferences', 'Create address']);
+    expectBreadcrumbsToEqualParts(['chevron_leftBack', 'My preferences', 'Create address']);
 
     // Fill the form with random data.
-    const button = await screen.findByRole('button', { name: 'Create' });
     const address = AddressFactory().one();
     await fillForm(address);
 
@@ -188,9 +195,9 @@ describe('<DashboardCreateAddress/>', () => {
     expect(
       fetchMock.called('https://joanie.endpoint/api/v1.0/addresses/', { method: 'post' }),
     ).toBe(false);
-    await act(async () => {
-      fireEvent.click(button);
-    });
+
+    await user.click(screen.getByRole('button', { name: 'Create' }));
+
     expect(
       fetchMock.called('https://joanie.endpoint/api/v1.0/addresses/', { method: 'post' }),
     ).toBe(true);

package/js/pages/DashboardAddressesManagement/DashboardCreateAddress.tsx

@@ -1,6 +1,6 @@
 import { defineMessages, FormattedMessage } from 'react-intl';
+import { Button } from '@openfun/cunningham-react';
 import Banner, { BannerType } from 'components/Banner';
-import { Button } from 'components/Button';
 import { DashboardCard } from 'widgets/Dashboard/components/DashboardCard';
 import { Spinner } from 'components/Spinner';
 import { useAddressesManagement } from 'hooks/useAddressesManagement';
@@ -23,7 +23,7 @@ export const DashboardCreateAddress = ({ onSettled }: { onSettled?: Function })
   const { FormView, handleSubmit } = useDashboardAddressForm();
   const {
     methods: { create },
-    states: { error, isLoading },
+    states: { error, isPending },
   } = useAddressesManagement();
 
   const onSubmit = (data: AddressFormValues) => {
@@ -43,8 +43,8 @@ export const DashboardCreateAddress = ({ onSettled }: { onSettled?: Function })
         </Button>
       }
     >
-      {isLoading && <Spinner />}
-      {!isLoading && (
+      {isPending && <Spinner />}
+      {!isPending && (
         <div>
           {error && <Banner message={error} type={BannerType.ERROR} rounded />}
           {FormView}