refactor: import dynamically SearchForm and Settings components

These components are only available after a click from the user, so
using dynamic import should improve performances.

1 files changed, 15 insertions, 4 deletions

diff --git a/src/components/Toolbar/Toolbar.tsx b/src/components/Toolbar/Toolbar.tsx
index 7b28757..17f9ef9 100644
--- a/src/components/Toolbar/Toolbar.tsx
+++ b/src/components/Toolbar/Toolbar.tsx
@@ -1,10 +1,21 @@
 import { ButtonToolbar } from '@components/Buttons';
 import MainNav from '@components/MainNav/MainNav';
-import SearchForm from '@components/SearchForm/SearchForm';
-import Settings from '@components/Settings/Settings';
+import Spinner from '@components/Spinner/Spinner';
+import dynamic from 'next/dynamic';
 import { RefObject, useCallback, useEffect, useRef, useState } from 'react';
 import styles from './Toolbar.module.scss';
 
+const DynamicSearchForm = dynamic(
+  () => import('@components/SearchForm/SearchForm'),
+  {
+    loading: () => <Spinner />,
+  }
+);
+
+const DynamicSettings = dynamic(() => import('@components/Settings/Settings'), {
+  loading: () => <Spinner />,
+});
+
 const Toolbar = () => {
   const [isNavOpened, setIsNavOpened] = useState<boolean>(false);
   const [isSearchOpened, setIsSearchOpened] = useState<boolean>(false);
@@ -129,7 +140,7 @@ const Toolbar = () => {
         setIsActivated={setIsSearchOpened}
       />
       <div id="search-modal" className={searchClasses} ref={searchModalRef}>
-        <SearchForm isOpened={isSearchOpened} />
+        <DynamicSearchForm isOpened={isSearchOpened} />
       </div>
       <ButtonToolbar
         ref={settingsBtnRef}
@@ -142,7 +153,7 @@ const Toolbar = () => {
         className={settingsClasses}
         ref={settingsModalRef}
       >
-        <Settings />
+        <DynamicSettings />
       </div>
     </div>
   );