Add chain list views

components/logo/index.tsx

@@ -1,5 +1,6 @@
 // NextJs
 import Image from "next/image";
+import Link from "next/link";
 
 // Image Assets
 import LogoIcon from "../../public/images/svg/logo.svg";
@@ -10,8 +11,10 @@ import { FunctionComponent } from "react";
 
 export const Logo: FunctionComponent = () => {
   return (
-    <LogoContainer>
-      <Image src={LogoIcon} fill={true} alt="Home Logo" />
-    </LogoContainer>
+    <Link href="/">
+      <LogoContainer>
+        <Image src={LogoIcon} fill={true} alt="Home Logo" />
+      </LogoContainer>
+    </Link>
   );
 };

components/skeleton/index.ts

@@ -0,0 +1,3 @@
+export * from "./skeleton-animation";
+export * from "./skeleton-circle";
+export * from "./skeleton-text";

components/skeleton/skeleton-animation.ts

@@ -0,0 +1,29 @@
+import styled from "styled-components";
+import color from "../../styles/color";
+
+export const SkeletonAnimation = styled.div`
+  opacity: 0.35 !important;
+  background-image: linear-gradient(
+      0.25turn,
+      transparent,
+      ${color.grey["400"]},
+      transparent
+    ),
+    linear-gradient(${color.grey["500"]}, ${color.grey["500"]}),
+    radial-gradient(
+      38px circle at 19px 19px,
+      ${color.grey["500"]} 50%,
+      transparent 51%
+    ),
+    linear-gradient(${color.grey["500"]}, ${color.grey["500"]});
+  background-repeat: no-repeat;
+  background-size: 315px 250px, 315px 180px, 100px 100px, 225px 30px;
+  background-position: -315px 0, 0 0, 0px 190px, 50px 195px;
+  animation: loading 2s infinite;
+
+  @keyframes loading {
+    to {
+      background-position: 315px 0, 0 0, 0 190px, 50px 195px;
+    }
+  }
+`;

components/skeleton/skeleton-circle.ts

@@ -0,0 +1,17 @@
+// Styles
+import color from "../../styles/color";
+import styled from "styled-components";
+
+// Components
+import { SkeletonAnimation } from "./skeleton-animation";
+
+// Types
+import { WidthHeightProps } from "../../types";
+
+export const SkeletonCircle = styled(SkeletonAnimation)<WidthHeightProps>`
+  width: ${(props) => props.width};
+  height: ${(props) => props.height};
+
+  background-color: ${color.grey["500"]};
+  border-radius: 50%;
+`;

components/skeleton/skeleton-text.ts

@@ -0,0 +1,13 @@
+// Styles
+import styled from "styled-components";
+
+// Components
+import { SkeletonAnimation } from "./skeleton-animation";
+
+// Types
+import { WidthHeightProps } from "../../types";
+
+export const SkeletonText = styled(SkeletonAnimation)<WidthHeightProps>`
+  width: ${(props) => props.width};
+  height: ${(props) => props.height};
+`;