Franknoirot/loading states (#246)
* Add Loading state with long load time messaging * Make /signin page respect user theme
This commit is contained in:
Frank Noirot
GitHub
26
public/kittycad-logomark-light.svg
Normal file
26
public/kittycad-logomark-light.svg
Normal file
@ -0,0 +1,26 @@
|
||||
<svg width="316" height="75" viewBox="0 0 316 75" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.33449 67.7274V65.5747H3.02906V63.4219H0.876343V18.2149H3.02906V16.0622H5.18177V13.9095H7.33449V11.7568H9.4872V7.45137H11.6399V5.29866H13.7926V3.14594H15.9453V0.993229H18.0981V3.14594H20.2508V5.29866H22.4035V7.45137H24.5562V9.60409H31.0143V7.45137H33.1671V5.29866H35.3198V3.14594H37.4725V0.993229H39.6252V3.14594H41.7779V5.29866H43.9306V7.45137H46.0833V11.7568H48.2361V13.9095H50.3888V16.0622H52.5415V18.2149H54.6942V63.4219H52.5415V65.5747H48.2361V67.7274H41.7779V69.8801H43.9306V74.1855H31.0143V69.8801H33.1671V67.7274H22.4035V69.8801H24.5562V74.1855H11.6399V69.8801H13.7926V67.7274H7.33449Z" fill="#101412"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.5563 11.7568H31.0145V9.60409H33.1672V7.45137H35.3199V5.29866H37.4726V3.14594H39.6253V5.29866H41.778V7.45137H43.9307V11.7568H46.0835V13.9095H48.2361V16.0622H50.3888V18.2149H52.5415V20.3677V22.5204V50.5057V52.6584V54.8111V63.4219H48.2361V65.5747H39.6253V67.7274V69.8801H41.778V72.0328H33.1671V69.8801H35.3199V67.7274V65.5747H20.2509V67.7274V69.8801H22.4036V72.0328H13.7927V69.8801H15.9454V67.7274V65.5747H7.33454V63.4219H3.02911V54.8111V52.6584V50.5057V22.5204V20.3677V18.2149H5.18183V16.0622H7.33454V13.9095H9.48726V11.7568L9.48731 11.7568H11.64V7.45137H13.7927V5.29866H15.9455V3.14594H18.0982V5.29866H20.2509V7.45137H22.4036V9.60409H24.5563V11.7568ZM5.18191 56.9638V59.1165H15.9455V56.9638H5.18191ZM9.48734 61.2692V63.4219H15.9455V61.2692H9.48734ZM39.6253 59.1165V56.9638H41.7781V59.1165H39.6253ZM43.9308 56.9638V59.1165H46.0835V56.9638H43.9308ZM48.2362 59.1165V56.9638H50.3889V59.1165H48.2362ZM39.6253 61.2692V63.4219H46.0835V61.2692H39.6253ZM20.2509 59.1165H35.3199V63.4219H20.2509V59.1165Z" fill="#D0FF00"/>
|
||||
<path d="M3.02911 52.6584V50.5057H52.5415V52.6584H3.02911Z" fill="#B1E515"/>
|
||||
<path d="M9.48725 26.8258V24.6731H46.0834V26.8258H48.2361V44.0475H46.0834V46.2002H9.48725V44.0475H7.33453V26.8258H9.48725Z" fill="#1F2320"/>
|
||||
<path d="M35.3198 35.4367V26.8258H39.6252V35.4367H35.3198Z" fill="#D0FF00"/>
|
||||
<path d="M24.5562 35.4367H31.0144V37.5894H28.8617V41.8948H35.3198V39.7421H37.4725V41.8948H35.3198V44.0475H20.2508V41.8948H18.0981V39.7421H20.2508V41.8948H26.709V37.5894H24.5562V35.4367Z" fill="#D0FF00"/>
|
||||
<path d="M20.2508 33.2839V31.1312H13.7927V33.2839H11.64V31.1312H13.7927V28.9785H20.2508V31.1312H22.4035V33.2839H20.2508Z" fill="#D0FF00"/>
|
||||
<path d="M48.2361 18.2149V16.0622H50.3888V18.2149H48.2361Z" fill="#92C51B"/>
|
||||
<path d="M7.33448 18.2149V16.0622H5.18176V18.2149H7.33448Z" fill="#92C51B"/>
|
||||
<path d="M46.0834 16.0622V13.9095H48.2361V16.0622H46.0834Z" fill="#92C51B"/>
|
||||
<path d="M9.48725 16.0622V13.9095H7.33453V16.0622H9.48725Z" fill="#92C51B"/>
|
||||
<rect x="26.709" y="11.7568" width="2.15271" height="4.30543" fill="#B1E515"/>
|
||||
<path d="M35.3197 16.0622V13.9095H37.4725V11.7568H39.6252V13.9095H41.7779V16.0622H35.3197Z" fill="#101412"/>
|
||||
<path d="M15.9453 13.9095V11.7568H18.098V13.9095H20.2507V16.0622H13.7926V13.9095H15.9453Z" fill="#101412"/>
|
||||
<path d="M9.48718 52.6584V50.5057H15.9453V52.6584H9.48718Z" fill="#92C51B"/>
|
||||
<rect x="24.5562" y="11.7568" width="6.45814" height="2.15271" fill="#92C51B"/>
|
||||
<path d="M77.4822 18.0099V33.8657L92.8664 17.1258L99.4091 22.077L86.9721 35.5161L103.535 58.0914H92.6306L81.0777 41.8231L77.4822 45.7133V58.0914H68.8175V18.0099H77.4822Z" fill="#FFFFFA"/>
|
||||
<path d="M115.158 20.7213C115.158 22.0574 114.666 23.1969 113.684 24.14C112.741 25.0438 111.601 25.4957 110.265 25.4957C108.929 25.4957 107.809 25.0438 106.906 24.14C106.002 23.1969 105.55 22.0574 105.55 20.7213C105.55 19.3853 106.002 18.2457 106.906 17.3026C107.809 16.3595 108.929 15.888 110.265 15.888C111.601 15.888 112.741 16.3595 113.684 17.3026C114.666 18.2457 115.158 19.3853 115.158 20.7213ZM114.627 29.5039V58.0914H105.962V29.5039H114.627Z" fill="#FFFFFA"/>
|
||||
<path d="M133.871 59.0935C130.335 59.0935 127.407 58.1897 125.089 56.3821C122.809 54.5745 121.67 51.922 121.67 48.4247V36.636H117.603V29.9165H121.67V22.8433L130.276 21.4286V29.9165H136.052L137.938 36.636H130.276V47.128C130.276 48.5033 130.629 49.6429 131.337 50.5467C132.044 51.4112 133.066 51.8434 134.402 51.8434C134.913 51.8434 135.463 51.7648 136.052 51.6077C136.642 51.4505 137.231 51.2343 137.82 50.9593L140.355 57.0894C139.687 57.6395 138.705 58.1111 137.408 58.504C136.111 58.897 134.932 59.0935 133.871 59.0935Z" fill="#FFFFFA"/>
|
||||
<path d="M156.465 59.0935C152.929 59.0935 150.001 58.1897 147.683 56.3821C145.404 54.5745 144.264 51.922 144.264 48.4247V36.636H140.197V29.9165H144.264V22.8433L152.87 21.4286V29.9165H158.646L160.532 36.636H152.87V47.128C152.87 48.5033 153.223 49.6429 153.931 50.5467C154.638 51.4112 155.66 51.8434 156.996 51.8434C157.507 51.8434 158.057 51.7648 158.646 51.6077C159.236 51.4505 159.825 51.2343 160.415 50.9593L162.949 57.0894C162.281 57.6395 161.299 58.1111 160.002 58.504C158.705 58.897 157.526 59.0935 156.465 59.0935Z" fill="#FFFFFA"/>
|
||||
<path d="M172.163 59.0345L173.165 56.6178L162.791 30.5649L171.515 29.5039C172.576 32.3332 173.637 35.1625 174.698 37.9917C175.759 40.821 176.8 43.6503 177.822 46.4796L183.834 29.5039H192.793L180.062 61.687C179.119 64.0054 177.488 65.9898 175.169 67.6403C172.851 69.33 170.375 70.4892 167.742 71.1179L164.736 64.1036C166.151 63.5535 167.625 62.8658 169.157 62.0406C170.69 61.2154 171.692 60.2134 172.163 59.0345Z" fill="#FFFFFA"/>
|
||||
<path d="M203.975 58.0914L197.64 51.7563V21.3723L203.975 15.0371H223.072L229.438 21.3723V31.2748H220.735V25.6162L218.859 23.7402H208.219L206.343 25.6162V47.5124L208.219 49.3883H218.859L220.735 47.5124V41.8538H229.438V51.7563L223.072 58.0914H203.975Z" fill="#FFFFFA"/>
|
||||
<path d="M236.208 58.0914V21.3723L242.544 15.0371H262.41L268.745 21.3723V58.0914H260.073V45.4212H244.881V58.0914H236.208ZM244.881 36.7488H260.073V25.6162L258.197 23.7402H246.757L244.881 25.6162V36.7488Z" fill="#FFFFFA"/>
|
||||
<path d="M276.098 58.0914V15.0371H301.716L308.051 21.3723V51.7563L301.716 58.0914H276.098ZM284.802 49.3883H297.503L299.379 47.5124V25.6162L297.503 23.7402H284.802V49.3883Z" fill="#FFFFFA"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.9 KiB |
@ -5,6 +5,7 @@ import { User, useStore } from './useStore'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { useEffect } from 'react'
|
||||
import { isTauri } from './lib/isTauri'
|
||||
import Loading from './components/Loading'
|
||||
|
||||
// Wrapper around protected routes, used in src/Router.tsx
|
||||
export const Auth = ({ children }: React.PropsWithChildren) => {
|
||||
@ -30,5 +31,5 @@ export const Auth = ({ children }: React.PropsWithChildren) => {
|
||||
}
|
||||
}, [user, token, navigate, isLoading])
|
||||
|
||||
return isLoading ? <>Loading...</> : <>{children}</>
|
||||
return isLoading ? <Loading /> : <>{children}</>
|
||||
}
|
||||
|
||||
@ -22,7 +22,7 @@ export const ActionButton = ({
|
||||
children,
|
||||
...props
|
||||
}: ActionButtonProps) => {
|
||||
const classNames = `group mono text-base flex items-center gap-2 rounded-sm border border-chalkboard-40 dark:border-chalkboard-60 hover:border-liquid-40 dark:hover:bg-chalkboard-90 p-[3px] ${
|
||||
const classNames = `group mono text-base flex items-center gap-2 rounded-sm border border-chalkboard-40 dark:border-chalkboard-60 hover:border-liquid-40 dark:hover:bg-chalkboard-90 p-[3px] text-chalkboard-110 dark:text-chalkboard-10 hover:text-chalkboard-110 hover:dark:text-chalkboard-10 ${
|
||||
icon ? 'pr-2' : 'px-2'
|
||||
} ${className}`
|
||||
|
||||
|
||||
41
src/components/Loading.tsx
Normal file
41
src/components/Loading.tsx
Normal file
@ -0,0 +1,41 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
const Loading = () => {
|
||||
const [hasLongLoadTime, setHasLongLoadTime] = useState(false)
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setHasLongLoadTime(true)
|
||||
}, 4000)
|
||||
|
||||
return () => clearTimeout(timer)
|
||||
}, [setHasLongLoadTime])
|
||||
return (
|
||||
<div className="body-bg flex flex-col items-center justify-center h-screen">
|
||||
<svg viewBox="0 0 10 10" className="w-8 h-8">
|
||||
<circle cx="5" cy="5" r="4" stroke="var(--liquid-20)" fill="none" />
|
||||
<circle
|
||||
cx="5"
|
||||
cy="5"
|
||||
r="4"
|
||||
stroke="var(--liquid-10)"
|
||||
fill="none"
|
||||
strokeDasharray="4, 4"
|
||||
className="animate-spin origin-center"
|
||||
/>
|
||||
</svg>
|
||||
<p className="mt-4 text-liquid-80 dark:text-liquid-20">
|
||||
Loading KittyCAD Modeling App...
|
||||
</p>
|
||||
<p
|
||||
className={
|
||||
'mt-4 text-liquid-90 dark:text-liquid-10 transition-opacity duration-500' +
|
||||
(hasLongLoadTime ? ' opacity-100' : ' opacity-0')
|
||||
}
|
||||
>
|
||||
Loading is taking longer than expected.
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Loading
|
||||
@ -55,6 +55,14 @@ button:disabled {
|
||||
@apply bg-chalkboard-90 text-chalkboard-40 border-chalkboard-70;
|
||||
}
|
||||
|
||||
a {
|
||||
@apply text-liquid-80 hover:text-liquid-70;
|
||||
}
|
||||
|
||||
.dark a {
|
||||
@apply text-liquid-20 hover:text-liquid-10;
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
|
||||
@ -1,16 +1,19 @@
|
||||
import { faSignInAlt } from '@fortawesome/free-solid-svg-icons'
|
||||
import { ActionButton } from '../components/ActionButton'
|
||||
import { isTauri } from '../lib/isTauri'
|
||||
import { useStore } from '../useStore'
|
||||
import { Themes, useStore } from '../useStore'
|
||||
import { invoke } from '@tauri-apps/api/tauri'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { VITE_KC_SITE_BASE_URL, VITE_KC_API_BASE_URL } from '../env'
|
||||
import { getSystemTheme } from '../lib/getSystemTheme'
|
||||
|
||||
const SignIn = () => {
|
||||
const navigate = useNavigate()
|
||||
const { setToken } = useStore((s) => ({
|
||||
const { setToken, theme } = useStore((s) => ({
|
||||
setToken: s.setToken,
|
||||
theme: s.theme,
|
||||
}))
|
||||
const appliedTheme = theme === Themes.System ? getSystemTheme() : theme
|
||||
const signInTauri = async () => {
|
||||
// We want to invoke our command to login via device auth.
|
||||
try {
|
||||
@ -25,11 +28,13 @@ const SignIn = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="h-full min-h-screen bg-chalkboard-20 dark:text-chalkboard-100 m-0 p-0 pt-24">
|
||||
<main className="body-bg h-full min-h-screen m-0 p-0 pt-24">
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<div>
|
||||
<img
|
||||
src="/kittycad-logomark.svg"
|
||||
src={`/kittycad-logomark${
|
||||
appliedTheme === Themes.Dark ? '-light' : ''
|
||||
}.svg`}
|
||||
alt="KittyCAD"
|
||||
className="w-48 inline-block"
|
||||
/>
|
||||
@ -37,7 +42,7 @@ const SignIn = () => {
|
||||
Modeling App
|
||||
</span>
|
||||
</div>
|
||||
<h1 className="font-bold text-2xl mt-12 mb-6 text-chalkboard-110">
|
||||
<h1 className="font-bold text-2xl mt-12 mb-6">
|
||||
Sign in to get started with the KittyCAD Modeling App
|
||||
</h1>
|
||||
<p className="py-4">
|
||||
@ -51,14 +56,7 @@ const SignIn = () => {
|
||||
<p className="py-4">
|
||||
KCMA is currently in development. If you would like to be notified
|
||||
when KCMA is ready for production, please sign up for our mailing list
|
||||
at{' '}
|
||||
<a
|
||||
href="https://kittycad.io"
|
||||
className="font-bold text-liquid-80 hover:text-liquid-70"
|
||||
>
|
||||
kittycad.io
|
||||
</a>
|
||||
.
|
||||
at <a href="https://kittycad.io">kittycad.io</a>.
|
||||
</p>
|
||||
{isTauri() ? (
|
||||
<ActionButton
|
||||
@ -76,7 +74,7 @@ const SignIn = () => {
|
||||
window.location.href.replace('signin', '')
|
||||
)}`}
|
||||
icon={{ icon: faSignInAlt }}
|
||||
className="w-fit mt-4 dark:hover:bg-chalkboard-30"
|
||||
className="w-fit mt-4"
|
||||
>
|
||||
Sign in
|
||||
</ActionButton>
|
||||
|
||||
Reference in New Issue
Block a user