From e424831f6103c0f08d021085de106d1f6c37d327 Mon Sep 17 00:00:00 2001
From: Nate Sesti <sestinj@gmail.com>
Date: Wed, 12 Jul 2023 10:03:11 -0700
Subject: better onboarding
---
extension/react-app/src/components/Onboarding.tsx | 51 ++++++++++++++++++-----
1 file changed, 41 insertions(+), 10 deletions(-)
(limited to 'extension/react-app/src')
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>
--
cgit v1.2.3-70-g09d2