From 8070ce17c6d666436df38c684f5868ee7f689422 Mon Sep 17 00:00:00 2001
From: Nate Sesti <sestinj@gmail.com>
Date: Thu, 3 Aug 2023 22:58:47 -0700
Subject: feat: :lipstick: nicer "continue server loading" UI

---
 extension/react-app/src/components/ComboBox.tsx   |  4 ++-
 extension/react-app/src/components/RingLoader.tsx | 39 +++++++++++++++++++++++
 extension/react-app/src/hooks/useWebsocket.ts     |  7 ++--
 extension/react-app/src/pages/gui.tsx             | 31 +++++++++++++++---
 4 files changed, 73 insertions(+), 8 deletions(-)
 create mode 100644 extension/react-app/src/components/RingLoader.tsx

(limited to 'extension/react-app/src')

diff --git a/extension/react-app/src/components/ComboBox.tsx b/extension/react-app/src/components/ComboBox.tsx
index 5eada708..df3f970c 100644
--- a/extension/react-app/src/components/ComboBox.tsx
+++ b/extension/react-app/src/components/ComboBox.tsx
@@ -32,7 +32,9 @@ const SEARCH_INDEX_NAME = "continue_context_items";
 const mainInputFontSize = 13;
 
 const EmptyPillDiv = styled.div`
-  padding: 8px;
+  padding: 4px;
+  padding-left: 8px;
+  padding-right: 8px;
   border-radius: ${defaultBorderRadius};
   border: 1px dashed ${lightGray};
   color: ${lightGray};
diff --git a/extension/react-app/src/components/RingLoader.tsx b/extension/react-app/src/components/RingLoader.tsx
new file mode 100644
index 00000000..5eb8a60f
--- /dev/null
+++ b/extension/react-app/src/components/RingLoader.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import styled, { keyframes } from "styled-components";
+import { buttonColor, vscBackground, vscForeground } from ".";
+
+const rotate = keyframes`
+  0% {
+    stroke-dashoffset: 100;
+  }
+  100% {
+    stroke-dashoffset: 12;
+  }
+`;
+
+const LoaderSvg = styled.svg`
+  transform: rotate(-90deg);
+  width: 40px;
+  height: 40px;
+  opacity: 50%;
+
+  circle {
+    fill: none;
+    stroke: ${vscForeground};
+    stroke-width: 2;
+    stroke-dasharray: 100;
+    stroke-dashoffset: 0;
+    animation: ${rotate} 6s ease-out infinite;
+    stroke-linecap: round;
+  }
+`;
+
+const RingLoader = () => (
+  <div className="m-auto w-full text-center">
+    <LoaderSvg viewBox="0 0 32 32">
+      <circle cx="16" cy="16" r="14" />
+    </LoaderSvg>
+  </div>
+);
+
+export default RingLoader;
diff --git a/extension/react-app/src/hooks/useWebsocket.ts b/extension/react-app/src/hooks/useWebsocket.ts
index 6b36be97..be34861b 100644
--- a/extension/react-app/src/hooks/useWebsocket.ts
+++ b/extension/react-app/src/hooks/useWebsocket.ts
@@ -25,8 +25,11 @@ function useContinueGUIProtocol(useVscodeMessagePassing: boolean = true) {
       "/gui/ws?session_id=" +
       encodeURIComponent(sessionId);
 
-    console.log("Creating websocket", serverUrlWithSessionId);
-    console.log("Using vscode message passing", useVscodeMessagePassing);
+    console.log(
+      "Creating GUI websocket",
+      serverUrlWithSessionId,
+      useVscodeMessagePassing
+    );
     const newClient = new ContinueGUIClientProtocol(
       serverUrlWithSessionId,
       useVscodeMessagePassing
diff --git a/extension/react-app/src/pages/gui.tsx b/extension/react-app/src/pages/gui.tsx
index 54897944..ed73ce85 100644
--- a/extension/react-app/src/pages/gui.tsx
+++ b/extension/react-app/src/pages/gui.tsx
@@ -32,6 +32,7 @@ import {
   setBottomMessage,
   setBottomMessageCloseTimeout,
 } from "../redux/slices/uiStateSlice";
+import RingLoader from "../components/RingLoader";
 
 const TopGUIDiv = styled.div`
   overflow: hidden;
@@ -402,11 +403,31 @@ function GUI(props: GUIProps) {
       >
         {typeof client === "undefined" && (
           <>
-            <Loader />
-            <p style={{ textAlign: "center" }}>Loading Continue server...</p>
-            {/* <p style={{ textAlign: "center" }}>
-              Make sure you have a folder opened in VS Code
-            </p> */}
+            <RingLoader />
+            <p
+              style={{
+                textAlign: "center",
+                margin: "0px",
+                fontSize: "14px",
+              }}
+            >
+              Continue Server Starting
+            </p>
+            <p
+              style={{
+                margin: "auto",
+                textAlign: "center",
+                marginTop: "4px",
+                fontSize: "12px",
+                cursor: "pointer",
+                opacity: 0.7,
+              }}
+              onClick={() => {
+                postVscMessage("toggleDevTools", {});
+              }}
+            >
+              <u>Click to view logs</u>
+            </p>
           </>
         )}
         {history?.timeline.map((node: HistoryNode, index: number) => {
-- 
cgit v1.2.3-70-g09d2