SkeletonBoundary

render: () => (
  <SchemePair>
    {(scheme) => {
      const active = signal(scheme === "dark");
      const appended = signal(false);
      const id = scheme === "light" ? "skeleton-boundary-demo" : "skeleton-boundary-other";
      return (
        <Stack gap="normal">
          <SkeletonBoundary id={id} active={active} label={copy.loading}>
            <Card>
              <CardHeader>
                <CardTitle>{copy.project}</CardTitle>
              </CardHeader>
              <CardContent>
                <Stack gap="normal">
                  <Inline align="center">
                    <img
                      src={image}
                      width={96}
                      height={72}
                      alt="Project cover"
                      style={{ borderRadius: "10px" }}
                    />
                    <Stack gap="compact">
                      <Inline align="center" gap="compact">
                        <Icon name="folder" />
                        <span>Design resources</span>
                      </Inline>
                      <span>{copy.note}</span>
                    </Stack>
                  </Inline>
                  <Field label={copy.name} htmlFor={`${id}-name`}>
                    <Input id={`${id}-name`} value={copy.project} />
                  </Field>
                  {mapSignal(appended, (value) =>
                    value ? <p data-testid={`${id}-extra`}>{copy.extra}</p> : null,
                  )}
                </Stack>
              </CardContent>
            </Card>
          </SkeletonBoundary>
          <ActionRow>
            <Button
              data-testid={`${id}-start`}
              variant="outline"
              onClick={() => {
                active.value = true;
              }}
            >
              {copy.start}
            </Button>
            <Button
              data-testid={`${id}-finish`}
              variant="outline"
              onClick={() => {
                active.value = false;
              }}
            >
              {copy.finish}
            </Button>
            <Button
              data-testid={`${id}-append`}
              variant="quiet"
              onClick={() => {
                appended.value = true;
              }}
            >
              {copy.append}
            </Button>
          </ActionRow>
        </Stack>
      );
    }}
  </SchemePair>
)