Function Loading

website/src/components/Loading.tsx:102–146

()

`;

export const Loading: React.FC = () => {
  const [currentFact, setCurrentFact] = useState(getRandomWikipediaFact());

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentFact(getRandomWikipediaFact());
    }, 7_000);
    return () => clearInterval(interval);
  }, []);

  // Replace page titles in the current fact with a link to the corresponding Wikipedia page.
  let skipCount = 0;
  const factContent: React.ReactNode[] = [];
  const tokens = currentFact.split('"');
  tokens.forEach((token, i) => {
    if (skipCount === 0) {
      if (i % 2 === 0) {
        // Regular text
        factContent.push(<span key={i}>{token}</span>);
      } else {
        // Wikipedia link
        // Single apostrophe is used for Wikipedia links which themselves have a double apostrophe
        // in them.
        token = token.replace(/'/g, `"`);
        factContent.push(
          <StyledTextLink key={i} text={token} href={getWikipediaPageUrl(token)} target="_blank" />
        );
      }
    } else {
      skipCount--;
    }
  });

  return (
    <Wrapper>
      <LoadingIndicator>
        <div />
        <div />
        <div />
        <div />
      </LoadingIndicator>
      <FactWrapper>{factContent}</FactWrapper>
    </Wrapper>
  );
};