refactor: Updated with Next.js's new dynamic import

Now Next.js does not reuiqre suspense with dynamic imports unlike React
>=18 always has always required. Simply placing Loading state within
the dynamic imports can show the loading state without Suspense component.

Minor: Removed the unused types.

Reference:
1. vercel/next.js#42589
2. https://nextjs.org/docs/advanced-features/dynamic-import

lib/types/index.ts

@@ -28,9 +28,7 @@ import { ReactEditor } from 'slate-react';
 /**
  * Global Collection Types
  */
-export type Types = CollectTypesEditor &
-  CollectTypesArrayObject &
-  CollectTypesMISC;
+export type Types = CollectTypesEditor & CollectTypesArrayObject & CollectTypesMISC;
 
 /**
  * Types Editor
@@ -254,7 +252,6 @@ export interface TypesEffects {
   cachedQueryFunction(): Promise<any>;
   storeName: IDB_STORE;
   enableIndexedDb: boolean;
-  queryWithoutSuspense: boolean;
   refetchOnMutation: boolean;
   refetchOnFocus: boolean;
   refetchOnBlur: boolean;
@@ -300,9 +297,7 @@ export type TypesMediaQueryEffect = <T>({
   stateUnderBreakpoint,
   stateOverBreakpoint,
 }: Pick<Types, 'breakpoint'> &
-  Partial<
-    Pick<Types, 'stateUnderBreakpoint' | 'stateOverBreakpoint'>
-  >) => AtomEffect<T | boolean>;
+  Partial<Pick<Types, 'stateUnderBreakpoint' | 'stateOverBreakpoint'>>) => AtomEffect<T | boolean>;
 
 export type TypesAtomEffect<T> = AtomEffect<T>;
 export type TypesAtomEffectWithParam<T, P> = (key: P) => AtomEffect<T>;

pages/app.tsx

@@ -2,21 +2,18 @@ import { LayoutApp } from '@components/layouts/layoutApp';
 import { ErrorState } from '@components/loadable/errorState';
 import { LoadingState } from '@components/loadable/loadingState';
 import dynamic from 'next/dynamic';
-import { Suspense } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 
 const TodoList = dynamic(() => import('components/todos/todoList').then((mod) => mod.TodoList), {
-  ssr: false,
+  loading: () => <LoadingState />,
 });
 
 const App = () => {
   return (
     <LayoutApp>
       <div className='flex flex-col items-center'>
         <ErrorBoundary fallback={<ErrorState />}>
-          <Suspense fallback={<LoadingState />}>
-            <TodoList />
-          </Suspense>
+          <TodoList />
         </ErrorBoundary>
       </div>
     </LayoutApp>