suspense

app/src/components/pages/chat.tsx

@@ -1,14 +1,16 @@
+import React, { Suspense } from 'react';
 import styled from '@emotion/styled';
 import slugify from 'slugify';
 import { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import { Loader } from '@mantine/core';
 
-import Message from '../message';
 import { useAppContext } from '../../context';
 import { backend } from '../../backend';
 import { Page } from '../page';
 
+const Message = React.lazy(() => import(/* webpackChunkName: "message" */ '../message'));
+
 const Messages = styled.div`
     max-height: 100%;
     flex-grow: 1;
@@ -81,6 +83,11 @@ export default function ChatPage(props: any) {
                 }
             },
         }}>
+        <Suspense fallback={<Messages id="messages">
+            <EmptyMessage>
+                <Loader variant="dots" />
+            </EmptyMessage>
+        </Messages>}>
             <Messages id="messages">
                 {shouldShowChat && (
                     <div style={{ paddingBottom: '4.5rem' }}>
@@ -96,5 +103,6 @@ export default function ChatPage(props: any) {
                     <Loader variant="dots" />
                 </EmptyMessage>}
             </Messages>
+        </Suspense>
     </Page>;
 }

app/src/tokenizer.ts

@@ -3,7 +3,7 @@ import { OpenAIMessage } from "./types";
 let enc: any;
 
 setTimeout(async () => {
-    const { encoding_for_model } = await import("./tiktoken/dist/tiktoken");
+    const { encoding_for_model } = await import(/* webpackChunkName: "tiktoken" */ "./tiktoken/dist/tiktoken");
     enc = encoding_for_model("gpt-3.5-turbo");
 }, 2000);