Progress & loading

<Spinner label="Loading deploys" />

<Progress value={64} color="success" />

type ProgressColor = "primary" | "info" | "success" | "warning" | "danger" | undefined;

type ProgressSize = "sm" | "md" | "lg" | undefined;

<SteppedProgress label="Onboarding" steps={4} value={2} />

<RingProgress value={72} label="72%" />

<SemiCircleProgress value={64} label="64%" />

function Example() {
    const progress = signal(40);
    const running = signal(true);
    // Trickle towards 90% while "navigating" (effects run only in the browser).
    effect(() => {
        if (!running()) return;
        const timer = setInterval(
            () => progress.set(Math.min(90, progress() + (90 - progress()) * 0.2)),
            300,
        );
        return () => clearInterval(timer);
    });
    return (
        <Stack gap="0.75rem" style={{ "padding-top": "0.75rem" }}>
            {/* Pinned to the top of the page (here: of the preview). */}
            <NavigationProgress visible={progress() < 100} value={progress()} />
            <Group gap="0.5rem">
                <Button
                    size="sm"
                    onClick={() => {
                        progress.set(5);
                        running.set(true);
                    }}
                >
                    Start navigation
                </Button>
                <Button
                    size="sm"
                    variant="outline"
                    onClick={() => {
                        running.set(false);
                        progress.set(100);
                    }}
                >
                    Finish
                </Button>
                <Text muted>{progress() >= 100 ? "Done" : `${Math.round(progress())}%`}</Text>
            </Group>
        </Stack>
    );
}

function Example() {
    const loading = signal(true);
    const refresh = () => loading.set(true);
    // Pretend each refresh takes 1.5 s (effects run only in the browser).
    effect(() => {
        if (!loading()) return;
        const timer = setTimeout(() => loading.set(false), 1500);
        return () => clearTimeout(timer);
    });
    return (
        <Stack gap="0.5rem">
            <Box style={{ position: "relative", "min-height": "6rem" }}>
                <Text>Deploy list</Text>
                <LoadingOverlay visible={loading()} label="Refreshing" />
            </Box>
            <Button size="sm" variant="outline" onClick={refresh} disabled={loading()}>
                Refresh
            </Button>
        </Stack>
    );
}

<Skeleton width="16rem" height="1.25rem" />

<SkeletonText lines={3} />

<SkeletonCard />

function Example() {
    const count = signal(3);
    const loading = signal(false);
    const load = () => {
        loading.set(true);
        setTimeout(() => {
            count.set(count() + 3);
            loading.set(false);
        }, 500);
    };
    return (
        <Stack gap="0.5rem">
            <For each={Array.from({ length: count() }, (_, i) => i + 1)}>
                {(n) => <Text>Activity #{n}</Text>}
            </For>
            <LoadMore
                onLoad={load}
                loading={loading()}
                hasMore={count() < 12}
                endLabel="That's everything."
            >
                Load 3 more
            </LoadMore>
        </Stack>
    );
}

function Example() {
    const deploys = signal(Array.from({ length: 6 }, (_, i) => 128 - i));
    const loading = signal(false);
    const hasMore = () => deploys().length < 30;
    const loadMore = () => {
        if (loading() || !hasMore()) return;
        loading.set(true);
        setTimeout(() => {
            const last = deploys()[deploys().length - 1] ?? 128;
            deploys.set([...deploys(), ...Array.from({ length: 6 }, (_, i) => last - 1 - i)]);
            loading.set(false);
        }, 600);
    };
    return (
        <ScrollArea maxHeight="12rem">
            <InfiniteScroll onLoadMore={loadMore} hasMore={hasMore()} loading={loading()}>
                <Stack gap="0.5rem">
                    <For each={deploys()}>{(n) => <Text>Deploy #{n}</Text>}</For>
                </Stack>
            </InfiniteScroll>
        </ScrollArea>
    );
}