GH-256: Add status bar

website/src/Playground.tsx

@@ -8,7 +8,8 @@ import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
 import { Link } from "react-router-dom";
 import welcomeMessage from "./welcomeMessage";
 import { Preview, Mode } from "./Preview";
-import { FiFolder, FiPackage } from "react-icons/fi";
+import { FiClock, FiFolder, FiPackage } from "react-icons/fi";
+import { MdOutlineAutoAwesome, MdOutlineDownloading, MdOutlineKeyboardAlt } from "react-icons/md";
 
 type Monaco = typeof monaco;
 
@@ -23,9 +24,9 @@ const Container = styled.div`
 
 const Menu = styled.nav`
     width: 100%;
-    height: 5rem;
     padding-left: 0.5rem;
     padding-right: 0.5rem;
+    height: 4rem;
     box-sizing: border-box;
     background:  #f1f1f1;
     gap: 1rem;
@@ -38,15 +39,17 @@ const Menu = styled.nav`
 const Main = styled.main`
     position: relative;
     display: flex;
-    height:100%;
+    height: calc(100% - 4rem);
     & > * {
         flex-grow: 1;
         flex-shrink: 1;
     }
 `;
 
 const View = styled.div`
+    position: relative;
     width: 50%;
+    height: 100%;
     display: flex;
     flex-direction: column;
     overflow: hidden;
@@ -73,9 +76,28 @@ const Logo = styled.div`
         color: #1a1a1a;
         font-size: 0.9rem;
         font-weight: bold;
+    } 
+`;
+
+const Status = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    right: 1rem;
+    bottom: 1rem;
+    padding: 0.5rem 1rem 0.5rem 1rem;
+    font-size: 0.9rem;
+    background: #f7f7f7;
+
+    & strong {
+        margin-right: 1rem;
     }
-  
-`
+
+    & svg {
+        position: relative;
+        top: 2px;
+    }
+`;
 
 type CompilationResult = {
     content: string,
@@ -93,6 +115,12 @@ type Compiler = Comlink.Remote<{
     transpile_no_document: (source: string, format: string) => Promise<CompilationResult>
 }>;
 
+type Status =
+    { type: "time", timeStart: Date, timeEnd: Date }
+    | { type: "typing" }
+    | { type: "compiling" }
+    | { type: "loading" };
+
 const COMPILE_INTERVAL = 300;
 
 function Playground() {
@@ -101,7 +129,8 @@ function Playground() {
     const [activeMode, setActiveMode] = useState<Mode>("render-html");
     const [otherOutputFormat, setOtherOutputFormat] = useState("");
     const [loaded, setLoaded] = useState(false);
-    const [compileTimeoutId, setCompileTimoutId] = useState<number | null>(null);
+    const [_compileTimeoutId, setCompileTimoutId] = useState<number | null>(null);
+    const [status, setStatus] = useState<Status | null>({ type: "loading" });
 
     const [errors, setErrors] = useState<string[]>([]);
     const [warnings, setWarnings] = useState<string[]>([]);
@@ -125,6 +154,8 @@ function Playground() {
 
     const compile = (input: string, mode: Mode, instant: boolean) => {
         const fn = () => {
+            setStatus({ type: "compiling" });
+            let start = new Date();
             let output;
             if (mode === "ast") {
                 output = compiler.ast(input);
@@ -145,6 +176,8 @@ function Playground() {
             }
 
             output?.then((result => {
+                let end = new Date();
+                setStatus({ type: "time", timeStart: start, timeEnd: end });
                 if (result === null) {
                     setActiveMode(mode);
                     setValidPreview(false);
@@ -176,7 +209,7 @@ function Playground() {
                     setValidPreview(false); // invalidate the current preview
                 })
         }
-
+        setStatus({ type: "typing" });
         setCompileTimoutId(oldId => {
             oldId && clearTimeout(oldId);
             return setTimeout(fn, instant ? 0 : COMPILE_INTERVAL) as unknown as number;
@@ -185,7 +218,7 @@ function Playground() {
 
     // save a reference to the monaco editor
     const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
-    const handleEditorDidMount = (editor: editor.IStandaloneCodeEditor, monaco: Monaco) => {
+    const handleEditorDidMount = (editor: editor.IStandaloneCodeEditor, _monaco: Monaco) => {
         editorRef.current = editor;
         editor.setValue(localStorage.getItem("input") ?? welcomeMessage);
     }
@@ -215,7 +248,13 @@ function Playground() {
         compile(editorRef.current?.getValue() ?? "", selectedMode, false);
     }, [otherOutputFormat]);
 
-
+    const statusElem = <Status>
+        <strong>Preview</strong>
+        {status?.type === "time" && <span><MdOutlineAutoAwesome /> Compiled in {status.timeEnd.getTime() - status.timeStart.getTime()}ms</span>}
+        {status?.type === "typing" && <span><MdOutlineKeyboardAlt /> Typing...</span>}
+        {status?.type === "compiling" && <span><FiClock /> Compiling...</span>}
+        {status?.type === "loading" && <span><MdOutlineDownloading />Loading compiler...</span>}
+    </Status>;
 
     return (
         <Container>
@@ -264,6 +303,7 @@ function Playground() {
                 </EditorContainer>
                 <View>
                     <IssuesReport warnings={warnings} errors={errors} />
+                    {statusElem}
                     <Preview content={content} mode={activeMode} valid={validPreview} />
                 </View>
             </Main>

website/src/main.tsx

@@ -11,25 +11,27 @@ import "./main.css"
 import styled from "styled-components";
 import { useLocation } from "react-router-dom";
 
+const PrPreviewContainer = styled.div`
+padding: 1rem;
+background: #e2e2e2;
+z-index:1000;
+
+& a {
+  color: inherit;
+}
+`;
+
 function PrPrompt() {
-  const Container = styled.div`
-    padding: 1rem;
-    background: #e2e2e2;
-    z-index:1000;
 
-    & a {
-      color: inherit;
-    }
-  `;
 
   const location = useLocation();
   const regex = /pr-preview\/pr-(\d+).*/;
   console.log(location.pathname);
   const match = location.pathname.match(regex);
   if (match !== null) {
-    return <Container>
+    return <PrPreviewContainer>
       <a href="https://github.com/modmark-org/modmark/pull/${ghNumber}">Preview of PR #{23}</a>
-    </ Container>
+    </ PrPreviewContainer>
   }
 
   return <></>