From 8462f1b7ae4f8f328d6fc95d1c66c73dcd2e13e7 Mon Sep 17 00:00:00 2001
From: dev-madhurendra <madhuredra.tiwari@zemosolabs.com>
Date: Sun, 25 Feb 2024 18:04:02 +0530
Subject: [PATCH] :sparkles: feat : added skeleton loader

---
 .../components/atoms/HomeSkeleton/index.tsx   | 19 +++++++++++++
 .../atoms/SidebarSkeleton/index.tsx           | 23 +++++++++++++++
 .../molecules/SkeletonLoader/index.tsx        | 28 +++++++++++++++++++
 3 files changed, 70 insertions(+)
 create mode 100644 frontend/src/components/atoms/HomeSkeleton/index.tsx
 create mode 100644 frontend/src/components/atoms/SidebarSkeleton/index.tsx
 create mode 100644 frontend/src/components/molecules/SkeletonLoader/index.tsx

diff --git a/frontend/src/components/atoms/HomeSkeleton/index.tsx b/frontend/src/components/atoms/HomeSkeleton/index.tsx
new file mode 100644
index 00000000..2600388c
--- /dev/null
+++ b/frontend/src/components/atoms/HomeSkeleton/index.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import { placeholders } from "../../../services/mocks/mocks";
+import { SkeletonHomeDiv, SkeletonLeftHomeDiv, SkeletonPlaceholder, SkeletonRightHomeDiv } from "../../../utils/styled";
+
+
+ const SkeletonHomeSection = () =>
+    <SkeletonHomeDiv>
+      <SkeletonLeftHomeDiv>
+        {placeholders.map((placeholder, index) => (
+          <SkeletonPlaceholder key={index} {...placeholder} />
+        ))}
+      </SkeletonLeftHomeDiv>
+      <SkeletonRightHomeDiv>
+        <SkeletonPlaceholder width="31.25rem" height="25rem" />
+      </SkeletonRightHomeDiv>
+    </SkeletonHomeDiv>
+
+
+export default SkeletonHomeSection;
diff --git a/frontend/src/components/atoms/SidebarSkeleton/index.tsx b/frontend/src/components/atoms/SidebarSkeleton/index.tsx
new file mode 100644
index 00000000..badd2a2f
--- /dev/null
+++ b/frontend/src/components/atoms/SidebarSkeleton/index.tsx
@@ -0,0 +1,23 @@
+import { keyframes } from "@emotion/react";
+import styled from "@emotion/styled";
+import React from "react";
+import { SkeletonDiv, SkeletonIconContainer, SkeletonLeftDiv, SkeletonMiddleDiv, SkeletonRightDiv } from "../../../utils/styled";
+
+
+const SidebarSkeletonLoader = () =>
+    <SkeletonIconContainer>
+      <SkeletonLeftDiv>
+        <SkeletonDiv />
+      </SkeletonLeftDiv>
+      <SkeletonMiddleDiv>
+        {new Array(6).fill(0).map((_, index) => (
+          <SkeletonDiv key={index} />
+        ))}
+      </SkeletonMiddleDiv>
+      <SkeletonRightDiv>
+        <SkeletonDiv />
+        <SkeletonDiv />
+      </SkeletonRightDiv>
+    </SkeletonIconContainer>
+
+export default SidebarSkeletonLoader;
diff --git a/frontend/src/components/molecules/SkeletonLoader/index.tsx b/frontend/src/components/molecules/SkeletonLoader/index.tsx
new file mode 100644
index 00000000..fb4cc5d7
--- /dev/null
+++ b/frontend/src/components/molecules/SkeletonLoader/index.tsx
@@ -0,0 +1,28 @@
+import { keyframes } from "@emotion/react";
+import styled from "@emotion/styled";
+import React from "react";
+import SidebarSkeletonLoader from "../../atoms/SidebarSkeleton";
+import HomeSkeleton from "../../atoms/HomeSkeleton";
+
+
+const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+`;
+
+
+
+const PortfolioSkeletonLoader: React.FC = () => {
+  return (
+    <Container>
+      <SidebarSkeletonLoader />
+      <HomeSkeleton />
+    </Container>
+  );
+};
+
+export default PortfolioSkeletonLoader;