1
/*
2
 *  This file is part of CoCalc: Copyright © 2020 Sagemath, Inc.
3
 *  License: MS-RSL – see LICENSE.md for details
4
 */
5
import { Icon } from "@cocalc/frontend/components/icon";
6
import { CSSProperties, ReactNode, useEffect, useState } from "react";
7
import useIsMounted from "lib/hooks/mounted";
8

9
interface Props {
10
  delay?: number;
11
  style?: CSSProperties;
12
  children?: ReactNode;
13
  before?: ReactNode;
14
  center?: boolean;
15
  large?: boolean;
16
}
17

18
export default function Loading({
19
  delay,
20
  style,
21
  children,
22
  before,
23
  center,
24
  large,
25
}: Props) {
26
  const [show, setShow] = useState<boolean>(false);
27
  const isMounted = useIsMounted();
28
  useEffect(() => {
29
    setTimeout(() => {
30
      if (!isMounted.current) return;
31
      setShow(true);
32
    }, delay ?? 500);
33
  }, []);
34

35
  if (!show) {
36
    return <>{before}</>;
37
  }
38
  return (
39
    <div
40
      style={{
41
        textAlign: center ? "center" : undefined,
42
        fontSize: large ? "32pt" : undefined,
43
        color: "#666",
44
        ...style,
45
      }}
46
    >
47
      <Icon name="spinner" spin /> {children ?? <>Loading...</>}
48
    </div>
49
  );
50
}
51

52