feat: added loading skeleton for notes page

Author: aaronczichon

design/src/styles/index.css

@@ -20,3 +20,4 @@
 @import './layout/cv-nav.css';
 @import './layout/cv-history.css';
 @import './layout/notes.css';
+@import './layout/skeleton.css';

design/src/styles/layout/skeleton.css

@@ -0,0 +1,22 @@
+.skeleton-loader {
+  width: 100%;
+  height: 15px;
+  display: block;
+  background: linear-gradient(
+      to right,
+      rgba(255, 255, 255, 0),
+      rgba(255, 255, 255, 0.5) 50%,
+      rgba(255, 255, 255, 0) 80%
+    ),
+    lightgray;
+  background-repeat: repeat-y;
+  background-size: 50px 500px;
+  background-position: 0 0;
+  animation: shine 1s infinite;
+}
+
+@keyframes shine {
+  to {
+    background-position: 100% 0, /* move highlight to right */ 0 0;
+  }
+}

site/src/components/dynamic/Note.jsx

@@ -11,14 +11,14 @@ export default function NoteList({ item }) {
 
   return (
     <li class="note-list-item">
-              <a href={`#${item.id}`} target="_blank">
-                <h3 id={item.id}>{item.title}</h3>
-              </a>
-              <p class="note-list-item--time">{getFormattedDate(item.date_created)}</p>
-              <p dangerouslySetInnerHTML={{__html: md.render(item.text)}}>
-              </p>
-              <hr>
-              </hr>
-            </li>
+      <a href={`#${item.id}`} target="_blank">
+        <h3 id={item.id}>{item.title}</h3>
+      </a>
+      <p class="note-list-item--time">{getFormattedDate(item.date_created)}</p>
+      <p dangerouslySetInnerHTML={{__html: md.render(item.text)}}>
+      </p>
+      <hr>
+      </hr>
+    </li>
   );
 }

site/src/components/dynamic/NoteList.jsx

@@ -1,8 +1,7 @@
 import { useState, useEffect } from 'preact/hooks';
 import Note from "./Note";
-import markdownit from 'markdown-it';
+import SkeletonList from "./SkeletonList";
 import { fetchNotes } from '../../functions/notes.func';
-const md = markdownit();
 
 export default function NoteList() {
   const [items, setItems] = useState([]);
@@ -14,6 +13,9 @@ export default function NoteList() {
 
   return (
     <ol class="note-list">
+      {
+        items.length === 0 ? <SkeletonList /> : null
+      }
       {
         items.map(item => (
             <Note item={item} />

site/src/components/dynamic/SkeletonList.jsx

@@ -0,0 +1,45 @@
+export default function SkeletonList() {
+  return (
+    <>
+      <li class="note-list-item">
+        <h3 class="skeleton-loader" style="max-width: 300px"></h3>
+        <p class="note-list-item--time skeleton-loader" style="max-width: 160px"></p>
+        <p>
+          <span class="skeleton-loader" style="margin-bottom: 4px"></span>
+          <span class="skeleton-loader" style="margin-bottom: 4px; max-width: 92%"></span>
+          <span class="skeleton-loader" style="margin-bottom: 4px"></span>
+          <span class="skeleton-loader" style="margin-bottom: 4px; max-width: 93%"></span>
+          <span class="skeleton-loader" style="margin-bottom: 4px; max-width: 72%"></span>
+          <span class="skeleton-loader" style="margin-bottom: 4px"></span>
+        </p>
+        <hr></hr>
+      </li>
+      <li class="note-list-item">
+        <h3 class="skeleton-loader" style="max-width: 300px"></h3>
+        <p class="note-list-item--time skeleton-loader" style="max-width: 160px"></p>
+        <p>
+          <span class="skeleton-loader" style="margin-bottom: 4px"></span>
+          <span class="skeleton-loader" style="margin-bottom: 4px; max-width: 92%"></span>
+          <span class="skeleton-loader" style="margin-bottom: 4px"></span>
+          <span class="skeleton-loader" style="margin-bottom: 4px; max-width: 93%"></span>
+          <span class="skeleton-loader" style="margin-bottom: 4px; max-width: 72%"></span>
+          <span class="skeleton-loader" style="margin-bottom: 4px"></span>
+        </p>
+        <hr></hr>
+      </li>
+      <li class="note-list-item">
+        <h3 class="skeleton-loader" style="max-width: 300px"></h3>
+        <p class="note-list-item--time skeleton-loader" style="max-width: 160px"></p>
+        <p>
+          <span class="skeleton-loader" style="margin-bottom: 4px"></span>
+          <span class="skeleton-loader" style="margin-bottom: 4px; max-width: 92%"></span>
+          <span class="skeleton-loader" style="margin-bottom: 4px"></span>
+          <span class="skeleton-loader" style="margin-bottom: 4px; max-width: 93%"></span>
+          <span class="skeleton-loader" style="margin-bottom: 4px; max-width: 72%"></span>
+          <span class="skeleton-loader" style="margin-bottom: 4px"></span>
+        </p>
+        <hr></hr>
+      </li>
+    </>
+  )
+}