feat: refactor provider

packages/app/src/pages/_app.tsx

@@ -3,8 +3,8 @@ import dynamic from 'next/dynamic';
 import '../../public/globals.css';
 import '../../public/variable.css';
 import './temporary.css';
-import { EditorProvider } from '@/components/editor-provider';
-import { ModalProvider } from '@/components/global-modal-provider';
+import { EditorProvider } from '@/providers/editor-provider';
+import { ModalProvider } from '@/providers/global-modal-provider';
 import { Logger } from '@toeverything/pathfinder-logger';
 import { WorkSpaceSliderBar } from '@/components/workspace-slider-bar';
 import '@fontsource/space-mono';
@@ -14,7 +14,7 @@ import { styled } from '@/styles';
 import type { ReactNode, PropsWithChildren, FC } from 'react';
 import { cloneElement } from 'react';
 
-const ThemeProvider = dynamic(() => import('@/styles/themeProvider'), {
+const ThemeProvider = dynamic(() => import('@/providers/themeProvider'), {
   ssr: false,
 });
 
@@ -52,7 +52,6 @@ function MyApp({ Component, pageProps }: AppProps) {
         ]}
       >
         <StyledPage>
-          {/*<TestEditor />*/}
           <WorkSpaceSliderBar />
           <Component {...pageProps} />
         </StyledPage>

packages/app/src/pages/index.tsx

@@ -1,11 +1,11 @@
 import type { NextPage } from 'next';
-import dynamic from 'next/dynamic';
 import { styled } from '@/styles';
 import { Header } from '@/components/Header';
 import { FAQ } from '@/components/faq';
-import Loading from '@/components/loading';
 import EdgelessToolbar from '@/components/edgeless-toolbar';
 import MobileModal from '@/components/mobile-modal';
+import Editor from '@/components/editor';
+
 import '@/components/simple-counter';
 
 const StyledEditorContainer = styled('div')(({ theme }) => {
@@ -23,40 +23,13 @@ const StyledWrapper = styled('div')(({ theme }) => {
   };
 });
 
-const StyledLoadingContainer = styled('div')(({ theme }) => {
-  return {
-    height: '100vh',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    color: theme.colors.primaryColor,
-    h1: {
-      fontSize: '2em',
-      marginTop: '150px',
-      fontWeight: '600',
-    },
-  };
-});
-
-const DynamicEditor = dynamic(() => import('../components/editor'), {
-  loading: () => (
-    <StyledLoadingContainer>
-      <div className="wrapper">
-        <Loading />
-        <h1>Loading...</h1>
-      </div>
-    </StyledLoadingContainer>
-  ),
-  ssr: false,
-});
-
 const Home: NextPage = () => {
   return (
     <StyledWrapper>
       <Header />
       <MobileModal />
       <StyledEditorContainer>
-        <DynamicEditor />
+        <Editor />
       </StyledEditorContainer>
       <FAQ />
       <EdgelessToolbar />