From fc79ef1379cfa24c7affe6016961fdf6190c118d Mon Sep 17 00:00:00 2001
From: VINEETH ASOK KUMAR <vineeth.asokkumar@clickhouse.com>
Date: Mon, 9 Oct 2023 17:57:12 +0200
Subject: [PATCH] Add horizontal loading

---
 src/components/Icon/IconCommon.tsx         |  2 +
 src/components/Icon/types.ts               |  1 +
 src/components/icons/HorizontalLoading.tsx | 69 ++++++++++++++++++++++
 3 files changed, 72 insertions(+)
 create mode 100644 src/components/icons/HorizontalLoading.tsx

diff --git a/src/components/Icon/IconCommon.tsx b/src/components/Icon/IconCommon.tsx
index da741a78..ffa0992b 100644
--- a/src/components/Icon/IconCommon.tsx
+++ b/src/components/Icon/IconCommon.tsx
@@ -56,6 +56,7 @@ import FolderOpen from "../icons/FolderOpen";
 import FolderClosed from "../icons/FolderClosed";
 import Gift from "@/components/icons/Gift";
 import Home from "@/components/icons/Home";
+import HorizontalLoading from "@/components/icons/HorizontalLoading";
 import Http from "@/components/icons/Http";
 import Integrations from "@/components/icons/Integrations";
 import LightBulb from "@/components/icons/LightBulb";
@@ -155,6 +156,7 @@ export const ICONS_MAP = {
   gift: Gift,
   history: HistoryIcon,
   home: Home,
+  "horizontal-loading": HorizontalLoading,
   http: Http,
   "info-in-circle": InfoInCircleIcon,
   information: InformationIcon,
diff --git a/src/components/Icon/types.ts b/src/components/Icon/types.ts
index 40e148d3..10d72f1a 100644
--- a/src/components/Icon/types.ts
+++ b/src/components/Icon/types.ts
@@ -59,6 +59,7 @@ export type IconName =
   | "folder-open"
   | "gift"
   | "history"
+  | "horizontal-loading"
   | "home"
   | "http"
   | "info-in-circle"
diff --git a/src/components/icons/HorizontalLoading.tsx b/src/components/icons/HorizontalLoading.tsx
new file mode 100644
index 00000000..a9469217
--- /dev/null
+++ b/src/components/icons/HorizontalLoading.tsx
@@ -0,0 +1,69 @@
+import DotsHorizontal from "./DotsHorizontal";
+import styled, { keyframes } from "styled-components";
+
+const animationCircle1 = keyframes`
+  0 {
+    r: 0;
+  }
+  30% {
+    r: 1.5;
+  }
+  60% {
+    r: 0;
+  }
+  100% {
+    r: 0;
+  }
+`;
+const animationCircle2 = keyframes`
+  0 {
+    r: 0;
+  }
+  20% {
+    r: 0;
+  }
+  40% {
+    r: 1.5;
+  }
+  80% {
+    r: 0;
+  }
+  100% {
+   r: 0
+  }
+`;
+const animationCircle3 = keyframes`
+  0 {
+    r: 0;
+  }
+  40% {
+    r: 0;
+  }
+  80% {
+    r: 1.5;
+  }
+  100% {
+   r: 0
+  }
+`;
+
+const HorizontalLoading = styled(DotsHorizontal)`
+  circle {
+    r: 0;
+    animation-name: example;
+    animation-duration: 1.5s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    &:nth-child(1) {
+      animation-name: ${animationCircle1};
+    }
+    &:nth-child(2) {
+      animation-name: ${animationCircle2};
+    }
+    &:nth-child(3) {
+      animation-name: ${animationCircle3};
+    }
+  }
+`;
+
+export default HorizontalLoading;