From e75dd33a14cafc34b70f1bf7597aaa20a11e68bb Mon Sep 17 00:00:00 2001
From: igorkishko <kishko.igor@gmail.com>
Date: Tue, 26 Mar 2024 18:42:49 +0200
Subject: [PATCH] add inline loader

---
 src/components/InlineLoader/InlineLoader.tsx  | 14 +++++
 .../InlineLoader/InlineLoader.types.ts        |  3 +
 src/components/InlineLoader/index.ts          |  1 +
 .../InlineLoader/inline-loader.module.css     | 63 +++++++++++++++++++
 src/components/Notification/Notify.tsx        |  2 +-
 src/components/index.ts                       |  1 +
 6 files changed, 83 insertions(+), 1 deletion(-)
 create mode 100644 src/components/InlineLoader/InlineLoader.tsx
 create mode 100644 src/components/InlineLoader/InlineLoader.types.ts
 create mode 100644 src/components/InlineLoader/index.ts
 create mode 100644 src/components/InlineLoader/inline-loader.module.css

diff --git a/src/components/InlineLoader/InlineLoader.tsx b/src/components/InlineLoader/InlineLoader.tsx
new file mode 100644
index 0000000..fa01333
--- /dev/null
+++ b/src/components/InlineLoader/InlineLoader.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { InlineLoaderProps } from './InlineLoader.types';
+import s from './inline-loader.module.css';
+
+export function InlineLoader({ className }: InlineLoaderProps) {
+  return (
+    <div className={`${s.loader} ${className}`}>
+      <div />
+      <div />
+      <div />
+      <div />
+    </div>
+  );
+}
diff --git a/src/components/InlineLoader/InlineLoader.types.ts b/src/components/InlineLoader/InlineLoader.types.ts
new file mode 100644
index 0000000..6d84635
--- /dev/null
+++ b/src/components/InlineLoader/InlineLoader.types.ts
@@ -0,0 +1,3 @@
+export interface InlineLoaderProps {
+  className?: string;
+}
diff --git a/src/components/InlineLoader/index.ts b/src/components/InlineLoader/index.ts
new file mode 100644
index 0000000..7f11b10
--- /dev/null
+++ b/src/components/InlineLoader/index.ts
@@ -0,0 +1 @@
+export * from './InlineLoader';
diff --git a/src/components/InlineLoader/inline-loader.module.css b/src/components/InlineLoader/inline-loader.module.css
new file mode 100644
index 0000000..f7c86d5
--- /dev/null
+++ b/src/components/InlineLoader/inline-loader.module.css
@@ -0,0 +1,63 @@
+.loader {
+    display: inline-block;
+    position: relative;
+    width: 40px;
+    height: 6px;
+}
+
+.loader div {
+    position: absolute;
+    top: 0;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: #457eff;
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+
+.loader div:nth-child(1) {
+    left: 4px;
+    animation: inline-loader1 0.6s infinite;
+}
+
+.loader div:nth-child(2) {
+    left: 4px;
+    animation: inline-loader2 0.6s infinite;
+}
+
+.loader div:nth-child(3) {
+    left: 16px;
+    animation: inline-loader2 0.6s infinite;
+}
+
+.loader div:nth-child(4) {
+    left: 28px;
+    animation: inline-loader3 0.6s infinite;
+}
+
+@keyframes inline-loader1 {
+    0% {
+        transform: scale(0);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+
+@keyframes inline-loader3 {
+    0% {
+        transform: scale(1);
+    }
+    100% {
+        transform: scale(0);
+    }
+}
+
+@keyframes inline-loader2 {
+    0% {
+        transform: translate(0, 0);
+    }
+    100% {
+        transform: translate(12px, 0);
+    }
+}
diff --git a/src/components/Notification/Notify.tsx b/src/components/Notification/Notify.tsx
index 9836a5d..d0bc88f 100644
--- a/src/components/Notification/Notify.tsx
+++ b/src/components/Notification/Notify.tsx
@@ -65,7 +65,7 @@ const notifyLoading = (
   options?: ToastOptions,
 ) => {
   toast(<Content message={message} description={description} />, {
-    icon: Spinner,
+    icon: <Spinner />,
     className: `${s.border} ${s.toast}`,
     ...options,
   });
diff --git a/src/components/index.ts b/src/components/index.ts
index cef28ab..49356d2 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -15,3 +15,4 @@ export * from './ConnectWallet';
 export * from './Badge';
 export * from './Radio';
 export * from './Checkbox';
+export * from './InlineLoader';