loading cover page (hidden)

3 files changed, 52 insertions, 0 deletions

diff --git a/extension/react-app/public/continue.gif b/extension/react-app/public/continue.gif
new file mode 100644
index 00000000..daed6663
--- /dev/null
+++ b/extension/react-app/public/continue.gif
diff --git a/extension/react-app/src/components/LoadingCover.tsx b/extension/react-app/src/components/LoadingCover.tsx
new file mode 100644
index 00000000..a0f8f7a2
--- /dev/null
+++ b/extension/react-app/src/components/LoadingCover.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import styled from "styled-components";
+
+const StyledDiv = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  background: linear-gradient(
+    101.79deg,
+    #12887a 0%,
+    #87245c 32%,
+    #e12637 63%,
+    #ffb215 100%
+  );
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  z-index: 10;
+`;
+
+const StyledImg = styled.img`
+  /* add your styles here */
+`;
+
+const StyledDiv2 = styled.div`
+  width: 50%;
+  height: 5px;
+  background: white;
+  margin-top: 20px;
+`;
+
+interface LoadingCoverProps {
+  message: string;
+  hidden?: boolean;
+}
+
+const LoadingCover = (props: LoadingCoverProps) => {
+  return (
+    <StyledDiv style={{ display: props.hidden ? "none" : "inherit" }}>
+      <StyledImg src="continue.gif" alt="centered image" width="50%" />
+      <StyledDiv2></StyledDiv2>
+      <p>{props.message}</p>
+    </StyledDiv>
+  );
+};
+
+export default LoadingCover;
diff --git a/extension/react-app/src/tabs/gui.tsx b/extension/react-app/src/tabs/gui.tsx
index 4886bfad..445d5700 100644
--- a/extension/react-app/src/tabs/gui.tsx
+++ b/extension/react-app/src/tabs/gui.tsx
@@ -18,6 +18,7 @@ import ReactSwitch from "react-switch";
 import { usePostHog } from "posthog-js/react";
 import { useSelector } from "react-redux";
 import { RootStore } from "../redux/store";
+import LoadingCover from "../components/LoadingCover";
 
 const TopGUIDiv = styled.div`
   overflow: hidden;
@@ -328,6 +329,7 @@ function GUI(props: GUIProps) {
   // const iterations = useSelector(selectIterations);
   return (
     <>
+      <LoadingCover hidden={true} message="Downloading local model..." />
       <TextDialog
         showDialog={showFeedbackDialog}
         onEnter={(text) => {