From 62756b491d6b4ed06db59bf3b096ce2ed92ddbaf Mon Sep 17 00:00:00 2001
From: Nate Sesti <sestinj@gmail.com>
Date: Wed, 5 Jul 2023 23:49:37 -0700
Subject: ui overhaul

---
 extension/react-app/src/components/Loader.tsx | 40 +++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 extension/react-app/src/components/Loader.tsx

(limited to 'extension/react-app/src/components/Loader.tsx')

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;
-- 
cgit v1.2.3-70-g09d2