@chakra-ui/react#Skeleton TypeScript Examples

CardSkeleton = () => {
  const bgColor = useColorModeValue("white", "gray.900");
  const cards:number[] = [1, 2, 3, 4, 5, 6, 7, 8]

  return (
    <>
      {cards.map(id => {
        return (
          <Box
            key={id}
            size="xl"
            py={2}
            rounded="xl"
            borderWidth="1px"
            bg={bgColor}
          >
            <Stack isInline justifyContent="space-between" py={2} px={[2, 3]}>
              <Box width="100%">
                <HStack isInline justifyContent="space-between">
                  <Skeleton height="14px" width="40%" />
                  <Skeleton height="14px" width="20%" />
                </HStack>
                <VStack align="start" marginTop={2}>
                  <Skeleton height="8px" width="30%" />
                </VStack>
                <Box marginTop={2}>
                  <Skeleton height="8px" width="100%" />
                  <Stack spacing={2} mt={1} isInline alignItems="center">
                    <Skeleton height="8px" width="80%" />
                  </Stack>
                </Box>
              </Box>
            </Stack>
          </Box>
        );
      })}
    </>
  );
}

export function LoadingSkeleton() {
  const data = [1, 2, 3]

  return (
    <Stack spacing="2" align="center">
      <Stack spacing="2" direction="row" alignItems="center" justify="center" wrap="wrap">
        {data.map((c) => (
          <Skeleton
            key={c}
            width={{ base: '40px', md: '60px' }}
            height={{ base: '40px', md: '60px' }}
            display="flex"
            alignItems="center"
          />
        ))}
      </Stack>
      <Skeleton height="10px" width="100%" maxW={'lg'} />
      <Skeleton height="10px" width="100%" maxW={'lg'} />
    </Stack>
  )
}

export function LoadingSkeleton() {
  const data = [1, 2, 3]
  const bgBox = useColorModeValue('white', 'gray.800')

  return (
    <List spacing={3}>
      {data.map((d: number) => (
        <ListItem
          key={d}
          w={'full'}
          bg={bgBox}
          boxShadow={'2xl'}
          rounded={'md'}
          overflow={'hidden'}
          p={6}
        >
          <Skeleton height="30px" mb="4" />

          <Skeleton height="10px" mb="1" />
          <Skeleton height="10px" />

          <HStack spacing={2} mt={4}>
            <Skeleton height="40px" width="40px" />
            <Skeleton height="40px" width="40px" />
            <Skeleton height="40px" width="40px" />
            <Skeleton height="40px" width="40px" />
          </HStack>
        </ListItem>
      ))}
    </List>
  )
}

TrackPageSkeleton: React.FC = () => {
  return (
    <Tabs>
      <TabList>
        <Tab>
          <Skeleton w="240px" h="25px" />
        </Tab>
      </TabList>
      <TabPanels>
        <TabPanel p={0}>
          <TrackViewSkeleton />
        </TabPanel>
      </TabPanels>
    </Tabs>
  );
}

TrackViewSkeleton: React.FC = () => {
  return (
    <Container maxW={["auto", "auto", "auto", "1700px"]} px="15px" py="22px">
      <Flex alignItems="top" justifyContent="space-between" direction={["column", "column", "column", "row"]}>
        <Box w="100%">
          <AspectRatio ratio={16 / 9}>
            <Skeleton w="100%" h="100%" />
          </AspectRatio>
        </Box>

        <Box maxW={["auto", "auto", "auto", "400px"]} minH="400px" w="100%" ml="30px"></Box>
      </Flex>
      <Flex alignItems="top" justifyContent="space-between" direction={["column", "column", "column", "row"]} mt="12px">
        <Box w="100%">
          <Skeleton w="100%" h="100px" />
        </Box>
        <Box maxW={["auto", "auto", "auto", "400px"]} w="100%" ml="30px" />
      </Flex>
    </Container>
  );
}

SkillCard = ({ name, image, link, description }) => {
  const { data, loading } = usePalette(image);

  return (
    <MotionBox variants={item}>
      <MotionBox whileHover={{ y: -5 }}>
        <Link href={link} isExternal>
          <HStack
            p={4}
            bg={useColorModeValue("white", "gray.800")}
            rounded="xl"
            borderWidth="1px"
            borderColor={useColorModeValue("gray.100", "gray.700")}
            w="100%"
            textAlign="left"
            align="start"
            spacing={4}
            _hover={{ shadow: "md" }}
          >
            <Box
              rounded="lg"
              p={2}
              position="relative"
              overflow="hidden"
              lineHeight={0}
              boxShadow="inset 0 0 1px 1px rgba(0, 0, 0, 0.015)"
            >
              <Box
                bg={data.lightVibrant}
                position="absolute"
                top={0}
                bottom={0}
                left={0}
                right={0}
                opacity={0.25}
              ></Box>
              {loading ? (
                <Skeleton height={26} width={26} rounded="md" />
              ) : (
                <Image
                  src={image}
                  height={26}
                  width={26}
                  layout="fixed"
                  rounded="md"
                />
              )}
            </Box>
            <VStack
              align="start"
              justify="flex-start"
              spacing={1}
              maxW="lg"
              h="100%"
            >
              <VStack spacing={0} align="start" flexGrow="1">
                <Text fontWeight="bold" fontSize="md" noOfLines={2}>
                  {name}
                </Text>
                <Text
                  fontSize="sm"
                  color={useColorModeValue("gray.500", "gray.200")}
                >
                  {description}
                </Text>
              </VStack>
            </VStack>
          </HStack>
        </Link>
      </MotionBox>
    </MotionBox>
  );
}

LoadingSkeleton: FC = () => (
    <Skeleton
        borderRadius="10px"
        height="85px"
    />
)

TrackVideo: React.FC<Props> = ({ track, streamOptions }) => {
  const [streamTokenNotExpired, setStreamTokenNotExpired] = React.useState(true);
  const [isPlaying, setIsPlaying] = React.useState(true);
  const streamKind = determineStreamKind(track, streamOptions.interpretation);
  const streamPresence = track.presences[streamKind];

  // TODO: handle error
  const { data: streamInfo, mutate: streamMutate } = Api.useStream(track.slug, streamKind === "interpretation");

  React.useEffect(() => {
    const now = dayjs().unix() + 180;
    if (streamInfo?.stream && streamInfo.stream.expiry <= now) {
      setStreamTokenNotExpired(false);
      console.log("TrackVideo: request streamData renew");

      const timer = setInterval(() => {
        console.log("Requesting streamData due to expiration");
        streamMutate();
      }, 1000);
      return () => clearInterval(timer);
    } else {
      setStreamTokenNotExpired(true);
    }
  }, [track.slug, streamKind, streamInfo?.stream?.expiry]);

  if (!streamPresence?.online) {
    return <TrackOfflineView />;
  }

  if (streamInfo && !streamInfo.stream) {
    return <TrackOfflineView />;
  }

  if (streamInfo?.stream && streamTokenNotExpired) {
    if (!streamInfo) throw "wut";
    return (
      <StreamView
        key={`${streamInfo.stream.slug}/${streamInfo.stream.type}`}
        playbackUrl={streamInfo.stream.url}
        shouldStartPlayback={isPlaying}
        onPlayOrStop={setIsPlaying}
      />
    );
  } else {
    return (
      <AspectRatio ratio={16 / 9}>
        <Skeleton h="100%" w="100%" />
      </AspectRatio>
    );
  }
}

Users = () => {
  const { push } = useRouter()
  const { data, fetchNextPage, isFetching, hasNextPage, refetch } =
    useInfiniteQuery<TPaginationResult<User>>(
      'users',
      async ({ pageParam = 1 }) => {
        const data: TPaginationResult<User> = await fetch(
          `/api/users?page=${pageParam}`
        ).then((res) => res.json())

        return data
      },
      {
        getNextPageParam: (lastPage) => {
          const pagination = lastPage.pagination as TPaginationDataPageBased
          return pagination.page === pagination.pageCount
            ? undefined
            : pagination.page + 1
        },
      }
    )

  const allData = useMemo(() => {
    return data?.pages.flatMap((page) => page.data)
  }, [data])

  const onEditUser = (id: User['id']) => {
    push(`/users/${id}`)
  }

  const onDeleteUser = async (id: User['id']) => {
    await fetch(`/api/users/${id}`, {
      method: 'DELETE',
    })
    refetch()
  }

  return (
    <Layout title="Users" backRoute="/">
      <VStack spacing={6} width="100%">
        <Heading>Users</Heading>
        <Flex direction="row" justify="flex-end" width="100%">
          <Button
            colorScheme="green"
            leftIcon={<AddIcon color="white" />}
            onClick={() => push('/users/create')}
          >
            Create user
          </Button>
        </Flex>
        <VStack
          boxShadow="0px 2px 8px #ccc"
          p={4}
          borderRadius={6}
          width="100%"
          align="flex-start"
        >
          {!data && (
            <Stack width="100%">
              <Skeleton height="20px" />
              <Skeleton height="20px" />
              <Skeleton height="20px" />
            </Stack>
          )}
          {allData?.map((user) => (
            <UserListItem
              key={user.id}
              {...user}
              onEdit={onEditUser}
              onDelete={onDeleteUser}
            />
          ))}
        </VStack>
        <Button
          colorScheme="blue"
          onClick={() => fetchNextPage()}
          disabled={isFetching || !hasNextPage}
        >
          Load more
        </Button>
      </VStack>
    </Layout>
  )
}

TrackChat: React.FC<Props> = ({ track }) => {
  const chat = useChat();
  const { data: session } = Api.useSession();
  const { data: chatMessagePin } = Api.useChatMessagePin(track.slug);
  const [[chatSessionStatus, chatSessionError], setChatSessionStatusTuple] = React.useState<ChatSessionStatusTuple>([
    chat?.session?.status,
    chat?.session?.error,
  ]);
  const [isLoadingHistory, setIsLoadingHistory] = React.useState<ChatHistoryLoadingStatus>({ status: "LOADING" });

  const [chatLog] = React.useState(new ChatLog());
  const [chatHistory, setChatHistory] = React.useState<ChatMessage[]>([]);
  const trackChannel = track.chat ? chat.tracks?.[track.slug]?.channel_arn ?? null : null;

  const [chatCallbacks] = React.useState({
    onStatus(status: ChatStatus, error: Error | null) {
      console.log("onStatusChange", status, error);
      setChatSessionStatusTuple([status, error]);
    },
    onMessage(update: ChatUpdate) {
      const adminControl = update.message?.adminControl;
      if (adminControl) {
        consumeChatAdminControl(adminControl);
      }
      chatLog.append(update);
    },
  });

  React.useEffect(() => {
    chatLog.onUpdate = (h) => setChatHistory(h);
  }, [chatLog]);

  React.useEffect(() => {
    if (!chat.session) return;
    return chat.session.subscribeStatus(chatCallbacks.onStatus);
  }, [chat.session]);

  React.useEffect(() => {
    if (!chat.session) return;
    if (!trackChannel) return;

    console.log("TrackChat: subscribeMessageUpdate");

    const unsubscribe = chat.session.subscribeMessageUpdate(trackChannel, chatCallbacks.onMessage);

    return () => {
      console.log("TrackChat: subscribeMessageUpdate; unsubscribing");
      unsubscribe();
    };
  }, [chat.session, trackChannel]);

  React.useEffect(() => {
    if (!chat.session) return;
    if (!chatSessionStatus || chatSessionStatus === "INIT") return;
    if (!trackChannel) return;

    const onChatHistory = (messages: ChatMessage[]) => {
      console.log("onChatHistory", messages);
      setIsLoadingHistory({ status: "LOADED" });
      chatLog.reverseMerge(messages);
    };

    chat.session
      .getHistory(trackChannel)
      .then(onChatHistory)
      .catch((e) => {
        console.error(e);
        setIsLoadingHistory({ status: "ERRORED", error: e });
      });
  }, [chat.session, chatSessionStatus, trackChannel]);

  if (!track.chat) {
    console.warn("TrackChat: NO TRACK CHAT PRESENT");
    return <></>;
  }

  // TODO: disable ChatForm until obtain session

  return (
    <Flex direction="column" h="100%" w="100%" border="1px solid" borderColor={Colors.chatBorder2}>
      <ChatStatusView
        status={chatSessionStatus}
        loading={isLoadingHistory.status === "LOADING"}
        error={chatSessionError || isLoadingHistory.error}
      />
      <Box flexGrow={1} flexShrink={0} flexBasis={0} w="100%" overflowX="hidden" overflowY="hidden">
        {trackChannel ? (
          <ChatHistoryView
            track={track}
            messages={chatHistory}
            loading={isLoadingHistory.status === "LOADING"}
            showAdminActions={session?.attendee?.is_staff ?? false}
            pinnedMessage={chatMessagePin?.pin?.message ?? null}
          />
        ) : (
          <Skeleton flexGrow={1} flexShrink={0} flexBasis={0} />
        )}
      </Box>
      <Box w="100%">
        <ChatForm track={track} channel={trackChannel} />
      </Box>
    </Flex>
  );
}

TrackView: React.FC<Props> = ({ track, streamOptionsState }) => {
  const [streamOptions, setStreamOptions] = streamOptionsState;
  const trackOptionsSelector = (instance: string) => (
    <TrackStreamOptionsSelector track={track} streamOptionsState={streamOptionsState} instance={instance} />
  );

  // Preload candidate speaker images
  React.useEffect(() => {
    if (!track.card_candidate) return;
    if (!track.card_candidate.speakers) return;

    track.card_candidate.speakers.forEach((s) => {
      const i = new Image();
      i.onload = () => console.log("Preloaded", s.avatar_url);
      i.src = s.avatar_url;
    });
  }, [track.card_candidate]);

  // TODO: Chakra 側のブレークポイントの調整
  // TODO: hide chat button
  return (
    <Container maxW={["auto", "auto", "auto", "1700px"]} px="15px" py="22px">
      <Flex alignItems="top" justifyContent="space-between" direction={["column", "column", "column", "row"]}>
        <Box w="100%">
          <React.Suspense
            fallback={
              <AspectRatio ratio={16 / 9}>
                <Skeleton w="100%" h="100%" />
              </AspectRatio>
            }
          >
            <TrackVideo track={track} streamOptions={streamOptionsState[0]} />
          </React.Suspense>
          {streamOptions.caption ? (
            <React.Suspense fallback={<Skeleton w="100%" h="80px" />}>
              <TrackCaption
                track={track}
                onUnsubscribe={() => {
                  setStreamOptions({ ...streamOptions, caption: false });
                }}
              />
            </React.Suspense>
          ) : null}

          <Box display={["flex", "flex", "none", "none"]} justifyContent="end" my={2}>
            <Box w="150px">{trackOptionsSelector("1")}</Box>
          </Box>
        </Box>

        {streamOptions.chat && track.chat ? (
          <Box
            maxW={["auto", "auto", "auto", "400px"]}
            h={["480px", "480px", "480px", "auto"]}
            w="100%"
            ml={["0", "0", "0", "30px"]}
          >
            <React.Suspense fallback={<Skeleton w="100%" h="100%" />}>
              <TrackChat track={track} />
            </React.Suspense>
          </Box>
        ) : null}
      </Flex>

      <Flex alignItems="top" justifyContent="space-between" direction={["column", "column", "column", "row"]} mt="12px">
        <Box w="100%">
          <TrackCardView
            card={track.card}
            nav={
              <HStack alignItems="flex-start" spacing="20px">
                {track.viewerCount ? <TrackViewerCount count={track.viewerCount} /> : null}
                <Box display={["none", "none", "block", "block"]}>{trackOptionsSelector("2")}</Box>
              </HStack>
            }
          />
        </Box>
        <Box maxW={["auto", "auto", "auto", "400px"]} w="100%" ml="30px">
          <AppVersionAlert />
        </Box>
      </Flex>
    </Container>
  );
}