update

index.html

@@ -15,7 +15,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet">
     <style>
-      body, html {
+      body, html, #root {
         height: 100%;
       }
 

src/components/ComposeBar.tsx

@@ -24,7 +24,7 @@ const ComposeArea = styled.div`
 const Input = styled.input`
   flex: 1;
   border: none;
-  font-size: 16px;
+  font-size: 18px;
   height: 30px;
   background: #eee;
   padding: 0 10px;

src/containers/Connected.tsx

@@ -6,10 +6,6 @@ import ComposeMessage from '../types/ComposeMessage';
 import ComposeBar from '../components/ComposeBar';
 
 const Wrapper = styled.div`
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -20,6 +16,10 @@ const MessageList = styled.div`
   transform: scale(1, -1);
 `;
 
+const Loading = styled.div`
+  transform: scale(1, -1);
+`;
+
 
 const Connected: React.FC<{}> = () => {
   const { send, messages } = useConnection();
@@ -45,7 +45,7 @@ const Connected: React.FC<{}> = () => {
         {reverseMessages.map((message) => (message.content ? (
           <Message self={message.self} message={message.content} />
         ):(
-          <div>Loading</div>
+          <Loading>Loading {Math.round(message.current / message.length * 100)}%</Loading>
         )))}
       </MessageList>
       <ComposeBar onSend={onSend} message={currentMessage} setMessage={setCurrentMessage} />

src/containers/Welcome.tsx

@@ -6,10 +6,6 @@ import useConnection from '../hooks/useConnection';
 
 const Wrapper = styled.div`
   display: flex;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
   height: 100%;
   flex-direction: column;
 `;