add inline loader

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>
+  );
+}

src/components/InlineLoader/InlineLoader.types.ts

@@ -0,0 +1,3 @@
+export interface InlineLoaderProps {
+  className?: string;
+}

src/components/InlineLoader/index.ts

@@ -0,0 +1 @@
+export * from './InlineLoader';

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);
+    }
+}

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,
   });

src/components/index.ts

@@ -15,3 +15,4 @@ export * from './ConnectWallet';
 export * from './Badge';
 export * from './Radio';
 export * from './Checkbox';
+export * from './InlineLoader';