optimize SearchOptionModal

apps/app/src/features/search/client/components/SearchPage/SearchControl.module.scss

@@ -1,8 +0,0 @@
-
-@use '@growi/core-styles/scss/bootstrap/init' as bs;
-@use '@growi/ui/scss/atoms/btn-muted';
-
-// == Colors
-.btn-delete {
-  @include btn-muted.colorize(bs.$red);
-}

apps/app/src/features/search/client/components/SearchPage/SearchControl.tsx

@@ -6,11 +6,9 @@ import { SORT_AXIS, SORT_ORDER } from '~/interfaces/search';
 import type { ISearchConditions, ISearchConfigurations } from '~/stores/search';
 
 import { SearchModalTriggerinput } from './SearchModalTriggerinput';
-import SearchOptionModal from './SearchOptionModal';
+import { SearchOptionModalLazyLoaded } from './SearchOptionModal';
 import SortControl from './SortControl';
 
-import styles from './SearchControl.module.scss';
-
 type Props = {
   isEnableSort: boolean;
   isEnableFilter: boolean;
@@ -205,7 +203,7 @@ const SearchControl = React.memo((props: Props): JSX.Element => {
         <Collapse isOpen={isCollapsed}>{collapseContents}</Collapse>
       )}
 
-      <SearchOptionModal
+      <SearchOptionModalLazyLoaded
         isOpen={isFileterOptionModalShown || false}
         onClose={() => setIsFileterOptionModalShown(false)}
         includeUserPages={includeUserPages}

apps/app/src/features/search/client/components/SearchPage/SearchOptionModal.tsx → apps/app/src/features/search/client/components/SearchPage/SearchOptionModal/SearchOptionModal.tsx

@@ -11,7 +11,7 @@ type Props = {
   onIncludeTrashPagesSwitched?: (isChecked: boolean) => void;
 };
 
-const SearchOptionModal: FC<Props> = (props: Props) => {
+export const SearchOptionModal: FC<Props> = (props: Props) => {
   const { t } = useTranslation('');
 
   const {
@@ -88,5 +88,3 @@ const SearchOptionModal: FC<Props> = (props: Props) => {
     </Modal>
   );
 };
-
-export default SearchOptionModal;

apps/app/src/features/search/client/components/SearchPage/SearchOptionModal/dynamic.tsx

@@ -0,0 +1,24 @@
+import type { JSX } from 'react';
+
+import { useLazyLoader } from '~/client/util/use-lazy-loader';
+
+type SearchOptionModalProps = {
+  isOpen: boolean;
+  includeUserPages: boolean;
+  includeTrashPages: boolean;
+  onClose?: () => void;
+  onIncludeUserPagesSwitched?: (isChecked: boolean) => void;
+  onIncludeTrashPagesSwitched?: (isChecked: boolean) => void;
+};
+
+export const SearchOptionModalLazyLoaded = (props: SearchOptionModalProps): JSX.Element => {
+  const { isOpen } = props;
+
+  const SearchOptionModal = useLazyLoader<SearchOptionModalProps>(
+    'search-option-modal',
+    () => import('./SearchOptionModal').then(mod => ({ default: mod.SearchOptionModal })),
+    isOpen,
+  );
+
+  return SearchOptionModal ? <SearchOptionModal {...props} /> : <></>;
+};

apps/app/src/features/search/client/components/SearchPage/SearchOptionModal/index.ts

@@ -0,0 +1 @@
+export { SearchOptionModalLazyLoaded } from './dynamic';