diff --git a/apps/web/src/components/pure/loading/page-loading.tsx b/apps/web/src/components/pure/loading/page-loading.tsx
index 3823adc704..d4b12087ad 100644
--- a/apps/web/src/components/pure/loading/page-loading.tsx
+++ b/apps/web/src/components/pure/loading/page-loading.tsx
@@ -1,4 +1,3 @@
-import { styled } from '@affine/component';
 import { AffineLoading } from '@affine/component/affine-loading';
 import { memo, Suspense } from 'react';
 
@@ -17,34 +16,9 @@ export const Loading = memo(function Loading() {
   );
 });
 
-// Used for the full page loading
-const StyledLoadingContainer = styled('div')(() => {
-  return {
-    height: '100vh',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    color: '#6880FF',
-    flexDirection: 'column',
-    h1: {
-      fontSize: '2em',
-      marginTop: '15px',
-      fontWeight: '600',
-    },
-  };
-});
-
+/**
+ * @deprecated use skeleton instead
+ */
 export const PageLoading = () => {
-  // We disable the loading on desktop, because want it looks faster.
-  //  This is a design requirement.
-  if (environment.isDesktop) {
-    return null;
-  }
-  return (
-    <StyledLoadingContainer>
-      <Loading />
-    </StyledLoadingContainer>
-  );
+  return null;
 };
-
-export default PageLoading;