feat: :lipstick: nicer "continue server loading" UI

2 files changed, 42 insertions, 1 deletions

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;