モーダルをlazy load

mehm8128 · Mar 24, 2024 · 27fd008 · 27fd008
1 parent 952de64
commit 27fd008
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 14 deletions.
diff --git a/workspaces/admin/src/pages/AuthorListPage/index.tsx b/workspaces/admin/src/pages/AuthorListPage/index.tsx
@@ -18,13 +18,13 @@ import {
   Tr,
 } from '@chakra-ui/react';
 import { useFormik } from 'formik';
-import { useId, useMemo, useState } from 'react';
+import { lazy, Suspense, useId, useMemo, useState } from 'react';
 
 import { useAuthorList } from '../../features/authors/hooks/useAuthorList';
 import { isContains } from '../../lib/filter/isContains';
 
-import { AuthorDetailModal } from './internal/AuthorDetailModal';
-import { CreateAuthorModal } from './internal/CreateAuthorModal';
+const AuthorDetailModal = lazy(() => import('./internal/AuthorDetailModal'));
+const CreateAuthorModal = lazy(() => import('./internal/CreateAuthorModal'));
 
 const AuthorSearchKind = {
   AuthorId: 'AuthorId',
@@ -199,9 +199,15 @@ export const AuthorListPage: React.FC = () => {
       </Stack>
 
       {modal.mode === AuthorModalMode.Detail ? (
-        <AuthorDetailModal isOpen authorId={modal.params.authorId} onClose={() => modalMethod.close()} />
+        <Suspense>
+          <AuthorDetailModal isOpen authorId={modal.params.authorId} onClose={() => modalMethod.close()} />
+        </Suspense>
+      ) : null}
+      {modal.mode === AuthorModalMode.Create ? (
+        <Suspense>
+          <CreateAuthorModal isOpen onClose={() => modalMethod.close()} />
+        </Suspense>
       ) : null}
-      {modal.mode === AuthorModalMode.Create ? <CreateAuthorModal isOpen onClose={() => modalMethod.close()} /> : null}
     </>
   );
 };
diff --git a/workspaces/admin/src/pages/AuthorListPage/internal/AuthorDetailModal/index.tsx b/workspaces/admin/src/pages/AuthorListPage/internal/AuthorDetailModal/index.tsx
@@ -29,7 +29,7 @@ export type Props = {
   onClose: () => void;
 };
 
-export const AuthorDetailModal: React.FC<Props> = ({ authorId, isOpen, onClose }) => {
+const AuthorDetailModal: React.FC<Props> = ({ authorId, isOpen, onClose }) => {
   const { data: allBookList } = useBookList();
   const { data: author } = useAuthor({ authorId });
   const [isEdit, toggleIsEdit] = useState(false);
@@ -92,3 +92,5 @@ export const AuthorDetailModal: React.FC<Props> = ({ authorId, isOpen, onClose }
     </Modal>
   );
 };
+
+export default AuthorDetailModal;
diff --git a/workspaces/admin/src/pages/AuthorListPage/internal/CreateAuthorModal/index.tsx b/workspaces/admin/src/pages/AuthorListPage/internal/CreateAuthorModal/index.tsx
@@ -30,7 +30,7 @@ export type Props = {
   onClose: () => void;
 };
 
-export const CreateAuthorModal: React.FC<Props> = ({ isOpen, onClose }) => {
+const CreateAuthorModal: React.FC<Props> = ({ isOpen, onClose }) => {
   const { mutate: createAuthor } = useCreateAuthor();
 
   const formik = useFormik({
@@ -191,3 +191,5 @@ export const CreateAuthorModal: React.FC<Props> = ({ isOpen, onClose }) => {
     </Modal>
   );
 };
+
+export default CreateAuthorModal;
diff --git a/workspaces/admin/src/pages/BookListPage/index.tsx b/workspaces/admin/src/pages/BookListPage/index.tsx
@@ -17,14 +17,14 @@ import {
   Thead,
   Tr,
 } from '@chakra-ui/react';
-import { useId, useMemo, useState } from 'react';
+import { lazy, Suspense, useId, useMemo, useState } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
 
 import { useBookList } from '../../features/books/hooks/useBookList';
 import { isContains } from '../../lib/filter/isContains';
 
-import { BookDetailModal } from './internal/BookDetailModal';
-import { CreateBookModal } from './internal/CreateBookModal';
+const BookDetailModal = lazy(() => import('./internal/BookDetailModal'));
+const CreateBookModal = lazy(() => import('./internal/CreateBookModal'));
 
 const BookSearchKind = {
   AuthorId: 'AuthorId',
@@ -209,9 +209,15 @@ export const BookListPage: React.FC = () => {
       </Stack>
 
       {modal.mode === BookModalMode.Detail ? (
-        <BookDetailModal isOpen bookId={modal.params.bookId} onClose={() => modalMethod.close()} />
+        <Suspense>
+          <BookDetailModal isOpen bookId={modal.params.bookId} onClose={() => modalMethod.close()} />
+        </Suspense>
+      ) : null}
+      {modal.mode === BookModalMode.Create ? (
+        <Suspense>
+          <CreateBookModal isOpen onClose={() => modalMethod.close()} />
+        </Suspense>
       ) : null}
-      {modal.mode === BookModalMode.Create ? <CreateBookModal isOpen onClose={() => modalMethod.close()} /> : null}
     </>
   );
 };
diff --git a/workspaces/admin/src/pages/BookListPage/internal/BookDetailModal/index.tsx b/workspaces/admin/src/pages/BookListPage/internal/BookDetailModal/index.tsx
@@ -14,7 +14,7 @@ type Props = {
   onClose: () => void;
 };
 
-export const BookDetailModal: React.FC<Props> = ({ bookId, isOpen, onClose }) => {
+const BookDetailModal: React.FC<Props> = ({ bookId, isOpen, onClose }) => {
   const { data: book } = useBook({ bookId });
 
   const [isEdit, toggleIsEdit] = useState(false);
@@ -56,3 +56,5 @@ export const BookDetailModal: React.FC<Props> = ({ bookId, isOpen, onClose }) =>
     </Modal>
   );
 };
+
+export default BookDetailModal;
diff --git a/workspaces/admin/src/pages/BookListPage/internal/CreateBookModal/index.tsx b/workspaces/admin/src/pages/BookListPage/internal/CreateBookModal/index.tsx
@@ -34,7 +34,7 @@ type Props = {
   onClose: () => void;
 };
 
-export const CreateBookModal: React.FC<Props> = ({ isOpen, onClose }) => {
+const CreateBookModal: React.FC<Props> = ({ isOpen, onClose }) => {
   const { data: authorList = [] } = useAuthorList();
   const { data: releaseList = [] } = useReleaseList();
 
@@ -253,3 +253,5 @@ export const CreateBookModal: React.FC<Props> = ({ isOpen, onClose }) => {
     </Modal>
   );
 };
+
+export default CreateBookModal;