better onboarding

4 files changed, 45 insertions, 14 deletions

diff --git a/extension/package-lock.json b/extension/package-lock.json
index d310643b..5d1cf395 100644
--- a/extension/package-lock.json
+++ b/extension/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "continue",
-  "version": "0.0.153",
+  "version": "0.0.154",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "continue",
-      "version": "0.0.153",
+      "version": "0.0.154",
       "license": "Apache-2.0",
       "dependencies": {
         "@electron/rebuild": "^3.2.10",
diff --git a/extension/package.json b/extension/package.json
index 61eee205..ab23b0b0 100644
--- a/extension/package.json
+++ b/extension/package.json
@@ -14,7 +14,7 @@
   "displayName": "Continue",
   "pricing": "Free",
   "description": "The open-source coding autopilot",
-  "version": "0.0.153",
+  "version": "0.0.154",
   "publisher": "Continue",
   "engines": {
     "vscode": "^1.67.0"
diff --git a/extension/react-app/src/components/Onboarding.tsx b/extension/react-app/src/components/Onboarding.tsx
index 1b37acc4..776ad460 100644
--- a/extension/react-app/src/components/Onboarding.tsx
+++ b/extension/react-app/src/components/Onboarding.tsx
@@ -4,6 +4,7 @@ import React, { useState, useEffect } from "react";
 import styled from "styled-components";
 import { ArrowLeft, ArrowRight } from "@styled-icons/heroicons-outline";
 import { defaultBorderRadius } from ".";
+import Loader from "./Loader";
 
 const StyledDiv = styled.div`
   position: absolute;
@@ -39,13 +40,9 @@ const Onboarding = () => {
     "Let Continue build the scaffolding of Python scripts, React components, and more",
   ];
 
-  const vscMediaUrl = useSelector(
-    (state: RootStore) => state.config.vscMediaUrl
-  );
-
   useEffect(() => {
     const hasVisited = localStorage.getItem("hasVisited");
-    if (hasVisited) {
+    if (hasVisited && false) {
       setCounter(4);
     } else {
       setCounter(0);
@@ -53,6 +50,12 @@ const Onboarding = () => {
     }
   }, []);
 
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setLoading(true);
+  }, [counter]);
+
   return (
     <StyledDiv hidden={counter >= 4}>
       <div
@@ -75,10 +78,34 @@ const Onboarding = () => {
       >
         <h1>{topMessages[counter]}</h1>
         <div style={{ display: "flex", justifyContent: "center" }}>
-          <img
-            src={`https://github.com/continuedev/continue/blob/main/media/${gifs[counter]}.gif?raw=true`}
-            alt={topMessages[counter]}
-          />
+          {loading && (
+            <div style={{ margin: "auto", position: "absolute", zIndex: 0 }}>
+              <Loader />
+            </div>
+          )}
+          {counter % 2 === 0 ? (
+            <img
+              src={`https://github.com/continuedev/continue/blob/main/media/${gifs[counter]}.gif?raw=true`}
+              width="100%"
+              key={"even-gif"}
+              alt={topMessages[counter]}
+              onLoad={() => {
+                setLoading(false);
+              }}
+              style={{ zIndex: 1 }}
+            />
+          ) : (
+            <img
+              src={`https://github.com/continuedev/continue/blob/main/media/${gifs[counter]}.gif?raw=true`}
+              width="100%"
+              key={"odd-gif"}
+              alt={topMessages[counter]}
+              onLoad={() => {
+                setLoading(false);
+              }}
+              style={{ zIndex: 1 }}
+            />
+          )}
         </div>
         <p>{bottomMessages[counter]}</p>
         <p
@@ -98,7 +125,11 @@ const Onboarding = () => {
           </StyledSpan>
           <span hidden={counter === 0}>{" | "}</span>
           <StyledSpan onClick={() => setCounter((prev) => prev + 1)}>
-            Click to {counter === 3 || "learn how to"} use Continue{" "}
+            {counter === 0
+              ? "Click to learn how to use Continue"
+              : counter === 3
+              ? "Get Started"
+              : "Next"}{" "}
             <ArrowRight width="18px" strokeWidth="2px" />
           </StyledSpan>
         </p>
diff --git a/extension/src/activation/activate.ts b/extension/src/activation/activate.ts
index 2c5ba58c..c46d6362 100644
--- a/extension/src/activation/activate.ts
+++ b/extension/src/activation/activate.ts
@@ -15,7 +15,7 @@ import fetch from "node-fetch";
 // import { CapturedTerminal } from "../terminal/terminalEmulator";
 
 const PACKAGE_JSON_RAW_GITHUB_URL =
-  "https://raw.githubusercontent.com/continuedev/continue/main/extension/package.json";
+  "https://raw.githubusercontent.com/continuedev/continue/HEAD/extension/package.json";
 
 export let extensionContext: vscode.ExtensionContext | undefined = undefined;