diff --git a/packages/core/client/src/collection-manager/CollectionManagerProvider.tsx b/packages/core/client/src/collection-manager/CollectionManagerProvider.tsx
index 9b800c0e5..f412f55c0 100644
--- a/packages/core/client/src/collection-manager/CollectionManagerProvider.tsx
+++ b/packages/core/client/src/collection-manager/CollectionManagerProvider.tsx
@@ -1,5 +1,5 @@
 import { Spin } from 'antd';
-import React from 'react';
+import React, { useState } from 'react';
 import { useAPIClient, useRequest } from '../api-client';
 import { CollectionManagerSchemaComponentProvider } from './CollectionManagerSchemaComponentProvider';
 import { CollectionManagerContext } from './context';
@@ -28,6 +28,7 @@ export const CollectionManagerProvider: React.FC<CollectionManagerOptions> = (pr
 
 export const RemoteCollectionManagerProvider = (props: any) => {
   const api = useAPIClient();
+  const [contentLoading, setContentLoading] = useState(false);
   const options = {
     resource: 'collections',
     action: 'list',
@@ -46,11 +47,13 @@ export const RemoteCollectionManagerProvider = (props: any) => {
   }
   return (
     <CollectionManagerProvider
-      service={service}
+      service={{...service, contentLoading, setContentLoading}}
       collections={service?.data?.data}
       refreshCM={async () => {
+        setContentLoading(true);
         const { data } = await api.request(options);
         service.mutate(data);
+        setContentLoading(false);
       }}
       {...props}
     />
diff --git a/packages/core/client/src/route-switch/antd/admin-layout/index.tsx b/packages/core/client/src/route-switch/antd/admin-layout/index.tsx
index 5c86674f3..b14321b14 100644
--- a/packages/core/client/src/route-switch/antd/admin-layout/index.tsx
+++ b/packages/core/client/src/route-switch/antd/admin-layout/index.tsx
@@ -1,9 +1,10 @@
 import { css } from '@emotion/css';
-import { Layout } from 'antd';
+import { Layout, Spin } from 'antd';
 import React, { useRef, useState } from 'react';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 import {
-  ACLAllowConfigure, ACLRolesCheckProvider,
+  ACLAllowConfigure,
+  ACLRolesCheckProvider,
   CurrentUser,
   CurrentUserProvider,
   findByUid,
@@ -17,6 +18,7 @@ import {
   useRoute,
   useSystemSettings
 } from '../../../';
+import { useCollectionManager } from '../../../collection-manager';
 import { PoweredBy } from '../../../powered-by';
 
 const filterByACL = (schema, options) => {
@@ -56,6 +58,7 @@ const InternalAdminLayout = (props: any) => {
   };
   const [hidden, setHidden] = useState(false);
   const result = useSystemSettings();
+  const { service } = useCollectionManager();
   return (
     <Layout>
       <Layout.Header
@@ -156,7 +159,7 @@ const InternalAdminLayout = (props: any) => {
             }
           `}
         >
-          {props.children}
+          {service.contentLoading ? <Spin /> : props.children}
           <Layout.Footer>
             <PoweredBy />
           </Layout.Footer>