extension/react-app/src/components/Loader.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

import { Play } from "@styled-icons/heroicons-outline";
import { useSelector } from "react-redux";
import styled from "styled-components";
import { RootStore } from "../redux/store";

const DEFAULT_SIZE = "28px";

const FlashingDiv = styled.div`
  margin: auto;
  width: ${DEFAULT_SIZE};
  animation: flash 1.2s infinite ease-in-out;
  @keyframes flash {
    0% {
      opacity: 0.4;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0.4;
    }
  }
`;

function Loader(props: { size?: string }) {
  const vscMediaUrl = useSelector(
    (state: RootStore) => state.config.vscMediaUrl
  );
  return (
    <FlashingDiv>
      {vscMediaUrl ? (
        <img src={`${vscMediaUrl}/play_button.png`} width="22px" />
      ) : (
        <Play width={props.size || DEFAULT_SIZE} />
      )}
    </FlashingDiv>
  );
}

export default Loader;