fix: cm/i18n/admin rtk issues

fix: multiple loading issue in the CM

packages/core/content-manager/admin/src/hooks/useDocument.ts

@@ -99,7 +99,10 @@ const useDocument: UseDocument = (args, opts) => {
     isLoading: isLoadingDocument,
     isFetching: isFetchingDocument,
     error,
-  } = useGetDocumentQuery(args, opts);
+  } = useGetDocumentQuery(args, {
+    ...opts,
+    skip: (!args.documentId && args.collectionType !== SINGLE_TYPES) || opts?.skip,
+  });
 
   const { components, schema, isLoading: isLoadingSchema } = useContentTypeSchema(args.model);
 

packages/core/content-manager/admin/src/pages/ListView/ListViewPage.tsx

@@ -97,7 +97,11 @@ const ListViewPage = () => {
   });
 
   const params = React.useMemo(() => buildValidParams(query), [query]);
-  const { data, error, isFetching } = useGetAllDocumentsQuery({
+  const {
+    currentData: data,
+    error,
+    isLoading,
+  } = useGetAllDocumentsQuery({
     model,
     params,
   });
@@ -170,7 +174,7 @@ const ListViewPage = () => {
     return formattedHeaders;
   }, [displayedHeaders, formatMessage, list, runHookWaterfall, schema?.options?.draftAndPublish]);
 
-  if (isFetching) {
+  if (isLoading) {
     return <Page.Loading />;
   }
 
@@ -239,7 +243,7 @@ const ListViewPage = () => {
       />
       <Layouts.Content>
         <Flex gap={4} direction="column" alignItems="stretch">
-          <Table.Root rows={results} headers={tableHeaders} isLoading={isFetching}>
+          <Table.Root rows={results} headers={tableHeaders} isLoading={isLoading}>
             <TableActionsBar />
             <Table.Content>
               <Table.Head>

packages/core/content-releases/admin/src/services/release.ts

@@ -21,6 +21,7 @@ import type {
   PublishRelease,
   MapEntriesToReleases,
 } from '../../../shared/contracts/releases';
+import type { EndpointDefinition } from '@reduxjs/toolkit/query';
 
 export interface GetReleasesQueryParams {
   page?: number;
@@ -45,33 +46,59 @@ type GetReleasesTabResponse = GetReleases.Response & {
   };
 };
 
+type AnyEndpointDefinition = EndpointDefinition<any, any, any, any>;
+
+// TODO: move this into the admin code & expose an improved version of enhanceEndpoints or a new function
+const extendInvalidatesTags = (
+  endpoint: AnyEndpointDefinition,
+  extraTags: string[] | { type: string; id: string }[]
+) => {
+  const originalInvalidatesTags = endpoint.invalidatesTags;
+
+  const newInvalidatesTags: AnyEndpointDefinition['invalidatesTags'] = (
+    result,
+    err,
+    args,
+    meta
+  ) => {
+    const originalTags =
+      typeof originalInvalidatesTags === 'function'
+        ? originalInvalidatesTags(result, err, args, meta)
+        : originalInvalidatesTags;
+
+    return [...(originalTags ?? []), ...extraTags];
+  };
+
+  Object.assign(endpoint, { invalidatesTags: newInvalidatesTags });
+};
+
 const releaseApi = adminApi
   .enhanceEndpoints({
     addTagTypes: ['Release', 'ReleaseAction', 'EntriesInRelease'],
     endpoints: {
-      updateDocument: {
-        invalidatesTags: [
+      updateDocument(endpoint: AnyEndpointDefinition) {
+        extendInvalidatesTags(endpoint, [
           { type: 'Release', id: 'LIST' },
           { type: 'ReleaseAction', id: 'LIST' },
-        ],
+        ]);
       },
-      deleteDocument: {
-        invalidatesTags: [
+      deleteDocument(endpoint: AnyEndpointDefinition) {
+        extendInvalidatesTags(endpoint, [
           { type: 'Release', id: 'LIST' },
           { type: 'ReleaseAction', id: 'LIST' },
-        ],
+        ]);
       },
-      deleteManyDocuments: {
-        invalidatesTags: [
+      deleteManyDocuments(endpoint: AnyEndpointDefinition) {
+        extendInvalidatesTags(endpoint, [
           { type: 'Release', id: 'LIST' },
           { type: 'ReleaseAction', id: 'LIST' },
-        ],
+        ]);
       },
-      discardDocument: {
-        invalidatesTags: [
+      discardDocument(endpoint: AnyEndpointDefinition) {
+        extendInvalidatesTags(endpoint, [
           { type: 'Release', id: 'LIST' },
           { type: 'ReleaseAction', id: 'LIST' },
-        ],
+        ]);
       },
     },
   })

packages/plugins/i18n/admin/src/components/CMHeaderActions.tsx

@@ -31,6 +31,7 @@ import { BulkLocaleActionModal } from './BulkLocaleActionModal';
 
 import type { Locale } from '../../../shared/contracts/locales';
 import type { I18nBaseQuery } from '../types';
+import { skipToken } from '@reduxjs/toolkit/query';
 
 /* -------------------------------------------------------------------------------------------------
  * LocalePickerAction
@@ -275,16 +276,21 @@ const BulkLocalePublishAction: DocumentActionComponent = ({
     meta: documentMeta,
     schema,
     validate,
-  } = useDocument({
-    model,
-    collectionType,
-    documentId,
-    params: {
-      locale: baseLocale,
+  } = useDocument(
+    {
+      model,
+      collectionType,
+      documentId,
+      params: {
+        locale: baseLocale,
+      },
     },
-  });
+    {
+      skip: !hasI18n,
+    }
+  );
 
-  const { data: localesMetadata = [] } = useGetLocalesQuery();
+  const { data: localesMetadata = [] } = useGetLocalesQuery(hasI18n ? undefined : skipToken);
 
   const headers = [
     {

packages/plugins/i18n/admin/src/components/LocaleListCell.tsx

@@ -20,6 +20,7 @@ const LocaleListCell = ({
   collectionType,
   model,
 }: LocaleListCellProps) => {
+  // TODO: avoid loading availableLocales for each row but get that from the BE
   const { meta, isLoading } = useDocument({
     documentId,
     collectionType,

packages/plugins/i18n/admin/src/hooks/useI18n.ts

@@ -43,6 +43,7 @@ const useI18n: UseI18n = () => {
     );
   }, [params.slug, userPermissions]);
 
+  // TODO: use specific hook to get schema only
   const { schema } = useDocument(
     {
       // We can non-null assert these because below we skip the query if they are not present
@@ -50,7 +51,7 @@ const useI18n: UseI18n = () => {
       model: params.slug!,
     },
     {
-      skip: !params.slug || !params.collectionType,
+      skip: true,
     }
   );