From 79236fa05156251fa4b031a78de6587ea6c2c834 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Fri, 4 Mar 2022 01:24:52 +0800
Subject: [PATCH] Improve loading UI for home page

---
 .../interfaces/Home/ProjectList/ProjectList.tsx  | 10 ++++++++--
 .../Home/ProjectList/ShimmeringCard.tsx          | 16 ++++++++++++++++
 studio/styles/storage.scss                       |  2 +-
 3 files changed, 25 insertions(+), 3 deletions(-)
 create mode 100644 studio/components/interfaces/Home/ProjectList/ShimmeringCard.tsx

diff --git a/studio/components/interfaces/Home/ProjectList/ProjectList.tsx b/studio/components/interfaces/Home/ProjectList/ProjectList.tsx
index ca96483e6e7..7417a804e2c 100644
--- a/studio/components/interfaces/Home/ProjectList/ProjectList.tsx
+++ b/studio/components/interfaces/Home/ProjectList/ProjectList.tsx
@@ -8,6 +8,7 @@ import { Organization, Project } from 'types'
 import { makeRandomString } from 'lib/helpers'
 import { PROJECT_STATUS } from 'lib/constants'
 import ProjectCard from './ProjectCard'
+import ShimmeringCard from './ShimmeringCard'
 
 interface Props {
   onSelectRestore: (project: Project) => void
@@ -36,7 +37,12 @@ const ProjectList: FC<Props> = ({
         return (
           <div className="space-y-3" key={makeRandomString(5)}>
             <h4 className="text-lg">{name}</h4>
-            <Loading active={isLoadingProjects}>
+            {isLoadingProjects ? (
+              <ul className="grid gap-4 mx-auto grid-cols-1 sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 ">
+                <ShimmeringCard />
+                <ShimmeringCard />
+              </ul>
+            ) : (
               <ul className="grid gap-4 mx-auto grid-cols-1 sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 ">
                 {!isLoadingProjects && isEmpty && (
                   <div className="max-w-4xl text-center col-span-4 space-y-4 border-2 border-gray-300 border-dashed rounded-lg p-6">
@@ -64,7 +70,7 @@ const ProjectList: FC<Props> = ({
                   />
                 ))}
               </ul>
-            </Loading>
+            )}
           </div>
         )
       })}
diff --git a/studio/components/interfaces/Home/ProjectList/ShimmeringCard.tsx b/studio/components/interfaces/Home/ProjectList/ShimmeringCard.tsx
new file mode 100644
index 00000000000..e2d5fa355cd
--- /dev/null
+++ b/studio/components/interfaces/Home/ProjectList/ShimmeringCard.tsx
@@ -0,0 +1,16 @@
+import { FC } from 'react'
+import CardButton from 'components/ui/CardButton'
+
+interface Props {}
+
+const ShimmeringCard: FC<Props> = ({}) => {
+  return (
+    <CardButton title="" footer={<div className="shimmering-loader rounded py-3 mx-1 w-1/3" />}>
+      <div className="flex flex-col justify-between space-y-2">
+        <div className="shimmering-loader rounded py-3 mx-1 w-2/3" />
+      </div>
+    </CardButton>
+  )
+}
+
+export default ShimmeringCard
diff --git a/studio/styles/storage.scss b/studio/styles/storage.scss
index 1b28d963409..7dd732a3690 100644
--- a/studio/styles/storage.scss
+++ b/studio/styles/storage.scss
@@ -58,7 +58,7 @@
 
 .dark .shimmering-loader {
   animation: shimmer 2s infinite linear;
-  background: linear-gradient(to right, #181818 4%, #333333 25%, #181818 36%);
+  background: linear-gradient(to right, #1f1f1f 4%, #333333 25%, #1f1f1f 36%);
   background-size: 1000px 100%;
 }