1 files changed, 40 insertions, 0 deletions
diff --git a/extension/react-app/src/components/Loader.tsx b/extension/react-app/src/components/Loader.tsx
new file mode 100644
index 00000000..90eff793
--- /dev/null
+++ b/extension/react-app/src/components/Loader.tsx
@@ -0,0 +1,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;