✨ feat : added skeleton loader

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;

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;

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;