feat: :lipstick: better loading experience

6 files changed, 28 insertions, 5 deletions

diff --git a/extension/react-app/src/components/ComboBox.tsx b/extension/react-app/src/components/ComboBox.tsx
index 43b66476..12cd91a2 100644
--- a/extension/react-app/src/components/ComboBox.tsx
+++ b/extension/react-app/src/components/ComboBox.tsx
@@ -40,6 +40,7 @@ import {
 } from "../util";
 import { ContextItem } from "../../../schema/FullState";
 import StyledMarkdownPreview from "./StyledMarkdownPreview";
+import { setTakenActionTrue } from "../redux/slices/miscSlice";
 
 const SEARCH_INDEX_NAME = "continue_context_items";
 
@@ -343,6 +344,7 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
 
   useEffect(() => {
     if (!nestedContextProvider) {
+      dispatch(setTakenActionTrue(null));
       setItems(
         contextProviders?.map((provider) => ({
           name: provider.display_title,
@@ -435,6 +437,7 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
       setNestedContextProvider(undefined);
 
       // Handle slash commands
+      dispatch(setTakenActionTrue(null));
       setItems(
         availableSlashCommands?.filter((slashCommand) =>
           slashCommand.name.toLowerCase().startsWith(inputValue.toLowerCase())
@@ -594,12 +597,14 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
     const handler = (event: any) => {
       if (event.data.type === "focusContinueInput") {
         inputRef.current!.focus();
+        dispatch(setTakenActionTrue(null));
       } else if (event.data.type === "focusContinueInputWithEdit") {
         inputRef.current!.focus();
 
         if (!inputRef.current?.value.startsWith("/edit")) {
           downshiftProps.setInputValue("/edit ");
         }
+        dispatch(setTakenActionTrue(null));
       }
     };
     window.addEventListener("message", handler);
diff --git a/extension/react-app/src/components/ModelSelect.tsx b/extension/react-app/src/components/ModelSelect.tsx
index 6856a2cf..b08141f9 100644
--- a/extension/react-app/src/components/ModelSelect.tsx
+++ b/extension/react-app/src/components/ModelSelect.tsx
@@ -189,6 +189,16 @@ function ModelSelect(props: {}) {
           }
         }}
       >
+        {!defaultModel && !savedModels && (
+          <option
+            value={JSON.stringify({
+              t: "default",
+              idx: -1,
+            })}
+          >
+            OpenAIFreeTrial - gpt-4
+          </option>
+        )}
         {defaultModel && (
           <option
             value={JSON.stringify({
diff --git a/extension/react-app/src/components/RingLoader.tsx b/extension/react-app/src/components/RingLoader.tsx
index 5eb8a60f..4d0a28fb 100644
--- a/extension/react-app/src/components/RingLoader.tsx
+++ b/extension/react-app/src/components/RingLoader.tsx
@@ -29,7 +29,7 @@ const LoaderSvg = styled.svg`
 `;
 
 const RingLoader = () => (
-  <div className="m-auto w-full text-center">
+  <div className="m-auto w-full text-center mt-2">
     <LoaderSvg viewBox="0 0 32 32">
       <circle cx="16" cy="16" r="14" />
     </LoaderSvg>
diff --git a/extension/react-app/src/pages/gui.tsx b/extension/react-app/src/pages/gui.tsx
index 12835121..b8199c19 100644
--- a/extension/react-app/src/pages/gui.tsx
+++ b/extension/react-app/src/pages/gui.tsx
@@ -45,6 +45,7 @@ import FTCDialog from "../components/dialogs/FTCDialog";
 import HeaderButtonWithText from "../components/HeaderButtonWithText";
 import { useNavigate } from "react-router-dom";
 import SuggestionsArea from "../components/Suggestions";
+import { setTakenActionTrue } from "../redux/slices/miscSlice";
 
 const TopGuiDiv = styled.div`
   overflow-y: scroll;
@@ -158,6 +159,7 @@ function GUI(props: GUIProps) {
   const bottomMessage = useSelector(
     (state: RootStore) => state.uiState.bottomMessage
   );
+  const takenAction = useSelector((state: RootStore) => state.misc.takenAction);
   useEffect(() => {
     if (!aboveComboBoxDivRef.current) return;
     dispatch(
@@ -263,6 +265,7 @@ function GUI(props: GUIProps) {
   }, [client, user_input_queue, waitingForClient]);
 
   const onMainTextInput = (event?: any) => {
+    dispatch(setTakenActionTrue(null));
     if (mainTextInputRef.current) {
       let input = (mainTextInputRef.current as any).inputValue;
 
@@ -477,7 +480,7 @@ function GUI(props: GUIProps) {
   useEffect(() => {
     const timeout = setTimeout(() => {
       setShowLoading(true);
-    }, 3000);
+    }, 10000);
 
     return () => {
       clearTimeout(timeout);
@@ -558,7 +561,7 @@ function GUI(props: GUIProps) {
           </HeaderButtonWithText>
         </div>
       </GUIHeaderDiv>
-      {showLoading && typeof client === "undefined" && (
+      {(takenAction || showLoading) && typeof client === "undefined" && (
         <>
           <RingLoader />
           <p
diff --git a/extension/react-app/src/redux/slices/miscSlice.ts b/extension/react-app/src/redux/slices/miscSlice.ts
index c59cc4eb..3990ac09 100644
--- a/extension/react-app/src/redux/slices/miscSlice.ts
+++ b/extension/react-app/src/redux/slices/miscSlice.ts
@@ -4,13 +4,17 @@ export const miscSlice = createSlice({
   name: "misc",
   initialState: {
     highlightedCode: "",
+    takenAction: false,
   },
   reducers: {
-    setHighlightedCode: (state, action) => {
+    setHighlightedCode: (state: any, action) => {
       state.highlightedCode = action.payload;
     },
+    setTakenActionTrue: (state: any, action) => {
+      state.takenAction = true;
+    },
   },
 });
 
-export const { setHighlightedCode } = miscSlice.actions;
+export const { setHighlightedCode, setTakenActionTrue } = miscSlice.actions;
 export default miscSlice.reducer;
diff --git a/extension/react-app/src/redux/store.ts b/extension/react-app/src/redux/store.ts
index 7959a067..e448e81a 100644
--- a/extension/react-app/src/redux/store.ts
+++ b/extension/react-app/src/redux/store.ts
@@ -28,6 +28,7 @@ export interface RootStore {
   };
   misc: {
     highlightedCode: RangeInFile | undefined;
+    takenAction: boolean;
   };
   uiState: {
     bottomMessage: JSX.Element | undefined;