perf: move components to lazy loading

src/App.tsx

@@ -1,10 +1,12 @@
-import { GptResponse } from "./components/GptResponse";
-import { InputBox } from "./components/InputBox";
-import { Settings } from "./components/Settings";
+import { lazy, Suspense } from "react";
 import { useInputStore } from "./state/inputStore";
 import { useGptResponseStore } from "./state/gptResponseStore";
+import { InputBox } from "./components/InputBox";
 import styles from "./styles.module.css";
-import { ErrorMessage } from "./components/ErrorMessage";
+
+const GptResponseLazy = lazy(() => import("./components/GptResponse"));
+const SettingsLazy = lazy(() => import("./components/Settings"));
+const ErrorLazy = lazy(() => import("./components/ErrorMessage"));
 
 export const QuickGpt = () => {
   const input = useInputStore(s => s.input)
@@ -17,9 +19,9 @@ export const QuickGpt = () => {
     <div data-tauri-drag-region className={styles.container}>
       <InputBox />
 
-      {shouldDisplayGptResponse && <GptResponse />}
-      {shouldDisplaySettings && <Settings />}
-      {gptResponseError && <ErrorMessage error={gptResponseError} />}
+      {shouldDisplayGptResponse && <Suspense><GptResponseLazy /></Suspense>}
+      {shouldDisplaySettings && <Suspense><SettingsLazy /></Suspense>}
+      {gptResponseError && <Suspense><ErrorLazy error={gptResponseError} /></Suspense>}
     </div>
   );
 }

src/components/ErrorMessage.tsx

@@ -1,9 +1,11 @@
 import { ResultLayout } from "./ResultLayout"
 
-export const ErrorMessage = ({ error }: { error: string }) => {
+const ErrorMessage = ({ error }: { error: string }) => {
     return <ResultLayout>
         Error: {error}
         <br />
         Check your API key typing <strong>:settings:</strong> in the input box.
     </ResultLayout>
 }
+
+export default ErrorMessage;

src/components/GptResponse.tsx

@@ -7,7 +7,7 @@ import { ResultLayout } from "./ResultLayout";
 import { getCurrent } from "@tauri-apps/api/window";
 import { useRef } from "react";
 
-export const GptResponse = () => {
+const GptResponse = () => {
     const responseEndRef = useRef<HTMLDivElement>(null)
     const [gptResponse, setGptResponse, loadingResponse] = useGptResponseStore(s => [
         s.gptResponse,
@@ -52,3 +52,5 @@ export const GptResponse = () => {
     </ResultLayout>
 
 };
+
+export default GptResponse;

src/components/Settings.tsx

@@ -2,7 +2,7 @@ import { settingsManager } from "../services/settingsManager";
 import { ResultLayout } from "./ResultLayout";
 import styles from "./settings.module.css";
 
-export const Settings = () => {
+const Settings = () => {
     return <ResultLayout>
         <div className={styles.wrapper}>
             <h2 className={styles.title}>QuickGTP Settings</h2>
@@ -19,3 +19,5 @@ export const Settings = () => {
         </div>
     </ResultLayout>
 };
+
+export default Settings;