Improve loading UI for home page

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>
         )
       })}

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

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%;
 }