add: loading

hengstchon · Mar 16, 2021 · 0df6a8f · 0df6a8f · vercel · Mar 16, 2021
1 parent 259ccc9
commit 0df6a8f
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 12 deletions.
diff --git a/components/Item.jsx b/components/Item.jsx
@@ -17,7 +17,6 @@ const Item = ({ item }) => {
       <div className="text-sm pt-2 text-gray-400">
         {dayjs(isoDate).fromNow()}
       </div>
-      <div className="text-sm pt-2">{isoDate}</div>
       <div className="pt-2 text-text">{content}</div>
     </div>
   )

diff --git a/components/Loading.jsx b/components/Loading.jsx
@@ -0,0 +1,10 @@
+const Loading = () => {
+  return (
+    <div className="bg-bg flex flex-col mt-20 items-center">
+      <img src="/images/loading.svg" width="100" height="100" alt="loading" />
+      <span className="text-center text-lg text-white">Loading...</span>
+    </div>
+  )
+}
+
+export default Loading
diff --git a/components/Nav.jsx b/components/Nav.jsx
@@ -43,7 +43,7 @@ const Nav = ({ navName }) => {
       ></div>
 
       <aside
-        className={`fixed top-0 left-0 w-64 h-full overflow-auto transition-all ease-in-out duration-300 transform z-50 ${
+        className={`fixed top-0 left-0 w-64 h-full overflow-auto overscroll-contain transition-all ease-in-out duration-300 transform z-50 ${
           isOpen ? 'translate-x-0' : '-translate-x-full'
         } lg:transform-none lg:border-r lg:border-gray-600 bg-gray-700 lg:bg-bg`}
       >

diff --git a/components/Page.jsx b/components/Page.jsx
@@ -1,17 +1,24 @@
 import Item from './Item'
 import Pagination from './Pagination'
+import Loading from './Loading'
 
 const Page = ({ pageItems, totalPage, page }) => {
   return (
     <div className="flex">
       <div className="lg:w-64 invisible"></div>
       <div className="container lg:max-w-screen-md mx-auto px-2 mt-5 divide-y divide-gray-600">
-        {pageItems.map((item, index) => (
-          <Item key={index} item={item}></Item>
-        ))}
-        <div className="pt-6 pb-10">
-          <Pagination totalPage={totalPage} page={parseInt(page)} />
-        </div>
+        {pageItems ? (
+          <div>
+            {pageItems.map((item, index) => (
+              <Item key={index} item={item}></Item>
+            ))}
+            <div className="pt-6 pb-10">
+              <Pagination totalPage={totalPage} page={parseInt(page)} />
+            </div>
+          </div>
+        ) : (
+          <Loading />
+        )}
       </div>
     </div>
   )

diff --git a/pages/[cat].jsx b/pages/[cat].jsx
@@ -11,7 +11,6 @@ export default function Content() {
   const page = router.query.page || '1'
   const { data } = useSWR(`/api/${cat}?page=${page}`, fetcher)
   const { navName, totalPage, pageItems } = data || {}
-
   return (
     <div className="bg-bg text-white">
       <Head>
@@ -21,9 +20,7 @@ export default function Content() {
 
       <Nav navName={navName} />
 
-      {pageItems && (
-        <Page pageItems={pageItems} totalPage={totalPage} page={page} />
-      )}
+      <Page pageItems={pageItems} totalPage={totalPage} page={page} />
     </div>
   )
 }
diff --git a/public/images/loading.svg b/public/images/loading.svg