feat: refactor provider

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 />