[#10] [UI] As a user, I can see the shimmer loading on Dashboard page

src/components/Dashboard/Content/index.test.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+
+import DashboardContent from '.';
+
+describe('DashboardContent', () => {
+  const dataTestId = 'dashboard-content';
+  it('renders DashboardContent and its components', () => {
+    render(<DashboardContent data-test-id={dataTestId} />);
+
+    const dashboardContent = screen.getByTestId(dataTestId);
+
+    expect(dashboardContent).toBeVisible();
+  });
+});

src/components/Dashboard/Content/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import Shimmer from 'components/Shimmer';
+
+interface DashboardContentProps {
+  'data-test-id'?: string;
+}
+
+const DashboardContent = ({ ...attributes }: DashboardContentProps): JSX.Element => {
+  return (
+    <div className="flex flex-col w-full" {...attributes}>
+      <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.test.tsx

@@ -6,12 +6,18 @@ import DashboardHeader from '.';
 
 describe('DashboardHeader', () => {
   const dataTestId = 'dashboard-header';
-  it('renders DashboardHeader and its components', () => {
+  it('renders DashboardHeader and its components without shimmers', () => {
     const dateTime = 'Monday, JUNE 15';
     const daysAgo = 'Today';
     const profileUrl = 'test url';
     render(
-      <DashboardHeader dateTime={dateTime} daysAgo={daysAgo} profileUrl={profileUrl} data-test-id={dataTestId}>
+      <DashboardHeader
+        dateTime={dateTime}
+        daysAgo={daysAgo}
+        profileUrl={profileUrl}
+        data-test-id={dataTestId}
+        shouldShowShimmer={false}
+      >
         Dashboard Header
       </DashboardHeader>
     );
@@ -21,10 +27,26 @@ describe('DashboardHeader', () => {
 
     expect(dashboardHeader).toBeVisible();
     expect(dashboardHeader).toHaveTextContent(dateTime);
-    expect(dashboardHeader).toHaveTextContent(dateTime);
-    expect(dashboardHeader).toHaveTextContent(dateTime);
+    expect(dashboardHeader).toHaveTextContent(daysAgo);
 
     expect(avatar).toBeVisible();
     expect(avatar).toHaveAttribute('src', profileUrl);
   });
+
+  it('does NOT renders text components', () => {
+    const dateTime = 'Monday, JUNE 15';
+    const daysAgo = 'Today';
+    const profileUrl = 'test url';
+    render(
+      <DashboardHeader dateTime={dateTime} daysAgo={daysAgo} profileUrl={profileUrl} data-test-id={dataTestId}>
+        Dashboard Header
+      </DashboardHeader>
+    );
+
+    const dashboardHeader = screen.getByTestId(dataTestId);
+
+    expect(dashboardHeader).toBeVisible();
+    expect(dashboardHeader).not.toHaveTextContent(dateTime);
+    expect(dashboardHeader).not.toHaveTextContent(daysAgo);
+  });
 });

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, ...rest }: DashboardHeaderProps): JSX.Element => {
+const DashboardHeader = ({
+  dateTime,
+  daysAgo,
+  profileUrl,
+  shouldShowShimmer = true,
+  children,
+  ...rest
+}: DashboardHeaderProps): JSX.Element => {
   return (
     <header className="flex flex-col min-h-screen" {...rest}>
       <div className="flex 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 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 justify-between mt-8 grow">
+      <div className="flex 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.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+
+import Shimmer from '.';
+
+describe('Shimmer', () => {
+  const dataTestId = 'shimmer';
+  it('renders Shimmer and its components', () => {
+    const testClass = 'test-class';
+    render(<Shimmer classAttributes={testClass} data-test-id={dataTestId} />);
+
+    const shimmer = screen.getByTestId(dataTestId);
+
+    expect(shimmer).toBeVisible();
+    expect(shimmer).toHaveClass(testClass);
+  });
+});

src/components/Shimmer/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+interface ShimmerProps {
+  classAttributes: string;
+  'data-test-id'?: string;
+}
+
+// Ref: https://delba.dev/blog/animated-loading-skeletons-with-tailwind
+const Shimmer = ({ classAttributes, ...attributes }: 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}`}
+      {...attributes}
+    >
+      <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: [],