fix skeletons

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 (
-    <>
+    <div className={styles.comment}>
       <div className={`${itemStyles.item} ${itemStyles.skeleton} ${styles.item} ${styles.skeleton}`}>
         <UpVote className={styles.upvote} />
         <div className={`${itemStyles.hunk} ${styles.hunk}`}>
           <div className={itemStyles.other}>
-            <span className={`${itemStyles.otherItem} ${itemStyles.otherItemLonger} clouds`} />
+            <span className={`${itemStyles.otherItem} clouds`} />
+            <span className={`${itemStyles.otherItem} clouds`} />
             <span className={`${itemStyles.otherItem} clouds`} />
             <span className={`${itemStyles.otherItem} ${itemStyles.otherItemLonger} clouds`} />
           </div>
           <div className={`${styles.text} clouds`} />
         </div>
       </div>
-      <div className={`${itemStyles.children} ${styles.children}`}>
+      <div className={`${itemStyles.children} ${styles.children} ${styles.skeleton}`}>
-        <div className={styles.comments}>
+        <div className={styles.replyPadder}>
+          <div className={`${itemStyles.other} ${styles.reply} clouds`} />
+        </div>
+        <div className={`${styles.comments} ml-sm-1 ml-md-3`}>
           {comments
             ? comments.map((_, i) => (
-              <CommentSkeleton key={i} />
+              <CommentSkeleton key={i} skeletonChildren={skeletonChildren - 1} />
               ))
             : null}
         </div>
       </div>
-    </>
+    </div>
   )
 }

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 {

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) => (
-    <CommentSkeleton key={i} skeletonChildren />
+    <CommentSkeleton key={i} skeletonChildren={2} />
   ))
 }
 

components/header.js

@@ -18,7 +18,7 @@ export default function Header () {
 
     if (session) {
       return (
-        <NavDropdown eventKey={'/' + session.user.name} title={`@${session.user.name}`} alignRight>
+        <NavDropdown title={`@${session.user.name}`} alignRight>
           <Link href={'/' + session.user.name} passHref>
             <NavDropdown.Item>profile</NavDropdown.Item>
           </Link>

components/item.js

@@ -64,6 +64,7 @@ export function ItemSkeleton ({ rank, children }) {
             <span className={`${styles.link} clouds`} />
           </div>
           <div className={styles.other}>
+            <span className={`${styles.otherItem} clouds`} />
             <span className={`${styles.otherItem} clouds`} />
             <span className={`${styles.otherItem} ${styles.otherItemLonger} clouds`} />
             <span className={`${styles.otherItem} ${styles.otherItemLonger} clouds`} />

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

pages/items/[id].js

@@ -48,7 +48,7 @@ function LoadItem ({ query }) {
         <ItemSkeleton>
           <ReplySkeleton />
         </ItemSkeleton>
-        <div className='mt-5'>
+        <div className={styles.comments}>
           <CommentsSkeleton />
         </div>
       </div>