diff --git a/components/comment.js b/components/comment.js index 230797bb..7d6b925b 100644 --- a/components/comment.js +++ b/components/comment.js @@ -97,30 +97,34 @@ export default function Comment ({ item, children, replyOpen, includeParent, cac } export function CommentSkeleton ({ skeletonChildren }) { - const comments = skeletonChildren ? new Array(2).fill(null) : [] + const comments = skeletonChildren > 0 ? new Array(skeletonChildren).fill(null) : [] return ( - <> +
- + +
-
-
+
+
+
+
+
{comments ? comments.map((_, i) => ( - + )) : null}
- +
) } diff --git a/components/comment.module.css b/components/comment.module.css index 4a560d8f..e279ae41 100644 --- a/components/comment.module.css +++ b/components/comment.module.css @@ -8,6 +8,7 @@ .text { margin-top: .1rem; + padding-right: .75rem; } .reply { @@ -29,8 +30,20 @@ } .skeleton .text { - height: 100px; + height: 80px; border-radius: .4rem; + margin-right: .75rem; +} + +.skeleton .reply { + width: 45px; + height: 10px; + border-radius: .2rem; +} + +.replyPadder { + padding: .25rem 0; + padding-bottom: .5rem; } .comment { diff --git a/components/comments.js b/components/comments.js index 0d339f26..233ddd0b 100644 --- a/components/comments.js +++ b/components/comments.js @@ -8,10 +8,10 @@ export default function Comments ({ comments, ...props }) { } export function CommentsSkeleton () { - const comments = new Array(3).fill(null) + const comments = new Array(1).fill(null) return comments.map((_, i) => ( - + )) } diff --git a/components/header.js b/components/header.js index dd3084a4..8e0ee8f5 100644 --- a/components/header.js +++ b/components/header.js @@ -18,7 +18,7 @@ export default function Header () { if (session) { return ( - + profile diff --git a/components/item.js b/components/item.js index 5b4e03b6..575a0332 100644 --- a/components/item.js +++ b/components/item.js @@ -64,6 +64,7 @@ export function ItemSkeleton ({ rank, children }) {
+ diff --git a/components/item.module.css b/components/item.module.css index d76c9106..eac683f4 100644 --- a/components/item.module.css +++ b/components/item.module.css @@ -67,7 +67,7 @@ height: 14px; background-color: grey; width: 800px; - border-radius: .4rem; + border-radius: .3rem; margin: 3px 0px; } @@ -75,7 +75,7 @@ display: inline-flex; width: 42px; height: 70%; - border-radius: .4rem; + border-radius: .27rem; background-color: grey; margin-right: .5rem; } diff --git a/pages/items/[id].js b/pages/items/[id].js index 1a68ee12..7a1ed425 100644 --- a/pages/items/[id].js +++ b/pages/items/[id].js @@ -48,7 +48,7 @@ function LoadItem ({ query }) { -
+