From 5ee5a089c5998e68be1b6375fee24f9a5d13c99c Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Mon, 14 Nov 2022 14:25:15 -0800
Subject: [PATCH] Add spinner component

---
 src/renderer/components/index.ts          |  1 +
 src/renderer/components/spinner/index.tsx | 23 +++++++++++++++++++++++
 2 files changed, 24 insertions(+)
 create mode 100644 src/renderer/components/spinner/index.tsx

diff --git a/src/renderer/components/index.ts b/src/renderer/components/index.ts
index b0342fa8f..7ccb65b2e 100644
--- a/src/renderer/components/index.ts
+++ b/src/renderer/components/index.ts
@@ -18,3 +18,4 @@ export * from './tabs';
 export * from './slider';
 export * from './accordion';
 export * from './dropzone';
+export * from './spinner';
diff --git a/src/renderer/components/spinner/index.tsx b/src/renderer/components/spinner/index.tsx
new file mode 100644
index 000000000..0a72207d2
--- /dev/null
+++ b/src/renderer/components/spinner/index.tsx
@@ -0,0 +1,23 @@
+import { IconType } from 'react-icons';
+import { RiLoader5Fill } from 'react-icons/ri';
+import styled from 'styled-components';
+import { rotating } from '@/renderer/styles';
+
+interface SpinnerProps extends IconType {
+  color?: string;
+  size?: number;
+}
+
+export const SpinnerIcon = styled(RiLoader5Fill)`
+  ${rotating}
+  animation: rotating 1s ease-in-out infinite;
+`;
+
+export const Spinner = ({ ...props }: SpinnerProps) => {
+  return <SpinnerIcon {...props} />;
+};
+
+Spinner.defaultProps = {
+  color: undefined,
+  size: 15,
+};