feat: add tags shimmer (#593)

heyxyz · Sep 2, 2022 · bba58d1 · bba58d1 · vercel · Sep 2, 2022
1 parent 50504f9
commit bba58d1
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 6 deletions.
diff --git a/src/components/Home/Trending.tsx b/src/components/Home/Trending.tsx
@@ -1,5 +1,5 @@
 import { gql, useQuery } from '@apollo/client';
-import UserProfileShimmer from '@components/Shared/Shimmer/UserProfileShimmer';
+import TrendingTagShimmer from '@components/Shared/Shimmer/TrendingTagShimmer';
 import { Card, CardBody } from '@components/UI/Card';
 import { ErrorMessage } from '@components/UI/ErrorMessage';
 import { TagResult, TagSortCriteria } from '@generated/types';
@@ -41,11 +41,13 @@ const Trending: FC = () => {
         <Title />
         <Card className="mb-4">
           <CardBody className="space-y-4">
-            <UserProfileShimmer showFollow />
-            <UserProfileShimmer showFollow />
-            <UserProfileShimmer showFollow />
-            <UserProfileShimmer showFollow />
-            <UserProfileShimmer showFollow />
+            <TrendingTagShimmer />
+            <TrendingTagShimmer />
+            <TrendingTagShimmer />
+            <TrendingTagShimmer />
+            <TrendingTagShimmer />
+            <TrendingTagShimmer />
+            <TrendingTagShimmer />
           </CardBody>
         </Card>
       </>

diff --git a/src/components/Shared/Shimmer/TrendingTagShimmer.tsx b/src/components/Shared/Shimmer/TrendingTagShimmer.tsx
@@ -0,0 +1,12 @@
+import { FC } from 'react';
+
+const TrendingTagShimmer: FC = () => {
+  return (
+    <div className="py-1 space-y-3">
+      <div className="w-3/5 h-3 rounded-lg shimmer" />
+      <div className="w-2/5 h-2.5 rounded-lg shimmer" />
+    </div>
+  );
+};
+
+export default TrendingTagShimmer;