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, useEffect, useState } from "react";
7
import useIsMounted from "lib/hooks/mounted";
8

9
interface Props {
10
  delay?: number;
11
  style?: CSSProperties;
12
}
13

14
export default function Loading({ delay, style }: Props) {
15
  const [show, setShow] = useState<boolean>(false);
16
  const isMounted = useIsMounted();
17
  useEffect(() => {
18
    setTimeout(() => {
19
      if (!isMounted.current) return;
20
      setShow(true);
21
    }, delay ?? 500);
22
  }, []);
23

24
  if (!show) {
25
    return <></>;
26
  }
27
  return (
28
    <div style={{ color: "#666", ...style }}>
29
      <Icon name="spinner" spin /> Saving...
30
    </div>
31
  );
32
}
33

34