[#10] Create Shimmer loading

src/components/Dashboard/Content/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import Shimmer from 'components/Shimmer';
+
+const DashboardContent = (): JSX.Element => {
+  return (
+    <div className="flex flex-col w-full">
+      <Shimmer classAttributes="h-[302px] rounded-[12px]" />
+      <div className="flex flex-row justify-between mt-[38px]">
+        <div className="flex flex-col justify-between">
+          <Shimmer classAttributes="w-[318px] h-[18px] rounded-[14px]" />
+          <Shimmer classAttributes="w-[212px] h-[18px] rounded-[14px]" />
+        </div>
+        <Shimmer classAttributes="w-[56px] h-[56px] rounded-full" />
+      </div>
+    </div>
+  );
+};
+
+export default DashboardContent;

src/components/Dashboard/Header/index.tsx

@@ -1,30 +1,53 @@
 import React from 'react';
 
 import { ReactComponent as NimbleLogoWhite } from 'assets/images/icons/nimble-logo-white.svg';
+import Shimmer from 'components/Shimmer';
 
 interface DashboardHeaderProps {
   dateTime: string;
   daysAgo: string;
   profileUrl: string;
+  shouldShowShimmer?: boolean;
   children: React.ReactNode;
   'data-test-id'?: string;
 }
-const DashboardHeader = ({ dateTime, daysAgo, profileUrl, children, ...attributes }: DashboardHeaderProps): JSX.Element => {
+const DashboardHeader = ({
+  dateTime,
+  daysAgo,
+  profileUrl,
+  shouldShowShimmer = true,
+  children,
+  ...attributes
+}: DashboardHeaderProps): JSX.Element => {
   return (
     <div className="flex flex-col min-h-screen" {...attributes}>
       <div className="flex flex-row justify-between pt-8">
-        <NimbleLogoWhite />
-        <img className="w-[36px] h-[36px] rounded-full" src={profileUrl} alt="user avatar" />
+        {shouldShowShimmer ? <Shimmer classAttributes="w-[117px] h-[18px] rounded-[14px]" /> : <NimbleLogoWhite />}
+        {shouldShowShimmer ? (
+          <Shimmer classAttributes="w-[36px] h-[36px] rounded-full" />
+        ) : (
+          <img className="w-[36px] h-[36px] rounded-full" src={profileUrl} alt="user avatar" />
+        )}
       </div>
       <div className="flex flex-row justify-between">
         <div className="w-1/5"></div>
         <div className="flex flex-col text-white mt-10 flex-1">
-          <p className="text-x-small font-extrabold">{dateTime}</p>
-          <p className="text-x-large font-extrabold mt-1">{daysAgo}</p>
+          {shouldShowShimmer ? (
+            <Shimmer classAttributes="w-[117px] h-[18px] rounded-[14px]" />
+          ) : (
+            <p className="text-x-small font-extrabold">{dateTime}</p>
+          )}
+          {shouldShowShimmer ? (
+            <div className="mt-[14px]">
+              <Shimmer classAttributes="w-[100px] h-[18px] rounded-[14px]" />
+            </div>
+          ) : (
+            <p className="text-x-large font-extrabold mt-1">{daysAgo}</p>
+          )}
         </div>
         <div className="w-1/5"></div>
       </div>
-      <div className="flex flex-row justify-between mt-8 grow">
+      <div className="flex flex-row justify-between mt-8">
         <div className="w-1/5"></div>
         <div className="flex-1">{children}</div>
         <div className="w-1/5"></div>

src/components/Shimmer/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+interface ShimmerProps {
+  classAttributes: string;
+}
+
+// Ref: https://delba.dev/blog/animated-loading-skeletons-with-tailwind
+const Shimmer = ({ classAttributes }: ShimmerProps): JSX.Element => {
+  return (
+    <div
+      className={`relative before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:from-30% before:via-white/50 before:to-transparent before:to-70% isolate overflow-hidden shadow-xl shadow-black/5 ${classAttributes}`}
+    >
+      <div className={`bg-white bg-opacity-[.12] ${classAttributes}`}></div>
+    </div>
+  );
+};
+
+export default Shimmer;

src/screens/Dashboard/index.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 
-import DashboardEmpty from 'components/Dashboard/Empty';
+import DashboardContent from 'components/Dashboard/Content';
 import DashboardHeader from 'components/Dashboard/Header';
 
 const DashBoardScreen = (): JSX.Element => {
   return (
     <div className="bg-black w-full h-full pl-8 pr-8">
       <DashboardHeader dateTime="Monday, JUNE 15" daysAgo="Today" profileUrl="https://i.pravatar.cc/150?img=3">
         <div className="w-full flex justify-center mt-36">
-          <DashboardEmpty />
+          <DashboardContent />
         </div>
       </DashboardHeader>
     </div>

tailwind.config.js

@@ -28,6 +28,13 @@ module.exports = {
         'survey-wide': '-0.08px',
         'survey-wider': '0.38px',
       },
+      keyframes: {
+        shimmer: {
+          '100%': {
+            transform: 'translateX(100%)',
+          },
+        },
+      },
     },
   },
   plugins: [],