packages/excalidraw/components/Spinner.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

import React from "react";

import "./Spinner.scss";

const Spinner = ({
  size = "1em",
  circleWidth = 8,
  synchronized = false,
  className = "",
}: {
  size?: string | number;
  circleWidth?: number;
  synchronized?: boolean;
  className?: string;
}) => {
  const mountTime = React.useRef(Date.now());
  const mountDelay = -(mountTime.current % 1600);

  return (
    <div className={`Spinner ${className}`}>
      <svg
        viewBox="0 0 100 100"
        style={{
          width: size,
          height: size,
          // fix for remounting causing spinner flicker
          ["--spinner-delay" as any]: synchronized ? `${mountDelay}ms` : 0,
        }}
      >
        <circle
          cx="50"
          cy="50"
          r={50 - circleWidth / 2}
          strokeWidth={circleWidth}
          fill="none"
          strokeMiterlimit="10"
        />
      </svg>
    </div>
  );
};

export default Spinner;