From 6b695a745bb0b2b0ac9af60b89a4cfecd8dea95b Mon Sep 17 00:00:00 2001
From: Pig Fang <g-plane@hotmail.com>
Date: Sat, 4 Jul 2020 09:36:46 +0800
Subject: [PATCH] add skeleton for closet

---
 .../src/views/user/Closet/ClosetItem.tsx      | 27 +++----------------
 .../views/user/Closet/LoadingClosetItem.tsx   | 26 ++++++++++++++++++
 .../assets/src/views/user/Closet/index.tsx    |  8 ++++--
 .../assets/src/views/user/Closet/styles.ts    | 22 +++++++++++++++
 .../assets/tests/views/user/Closet.test.tsx   |  6 -----
 5 files changed, 58 insertions(+), 31 deletions(-)
 create mode 100644 resources/assets/src/views/user/Closet/LoadingClosetItem.tsx
 create mode 100644 resources/assets/src/views/user/Closet/styles.ts

diff --git a/resources/assets/src/views/user/Closet/ClosetItem.tsx b/resources/assets/src/views/user/Closet/ClosetItem.tsx
index fb457305..2acab662 100644
--- a/resources/assets/src/views/user/Closet/ClosetItem.tsx
+++ b/resources/assets/src/views/user/Closet/ClosetItem.tsx
@@ -1,27 +1,8 @@
 import React from 'react'
-import styled from '@emotion/styled'
 import { t } from '@/scripts/i18n'
 import { ClosetItem } from '@/scripts/types'
 import setAsAvatar from './setAsAvatar'
-
-const Card = styled.div`
-  width: 235px;
-  transition-property: box-shadow;
-  transition-duration: 0.3s;
-
-  &:hover {
-    cursor: pointer;
-  }
-
-  .card-body {
-    background-color: #eff1f0;
-  }
-`
-const DropdownButton = styled.i`
-  :hover {
-    color: #000;
-  }
-`
+import { Card, DropdownButton } from './styles'
 
 interface Props {
   item: ClosetItem
@@ -55,13 +36,13 @@ const ClosetItem: React.FC<Props> = (props) => {
             {item.pivot.item_name}
           </span>
           <span className="d-inline-block drop-down">
-            <span
+            <DropdownButton
               data-toggle="dropdown"
               aria-haspopup="true"
               aria-expanded="false"
             >
-              <DropdownButton className="fas fa-cog text-gray" />
-            </span>
+              <i className="fas fa-cog" />
+            </DropdownButton>
             <div className="dropdown-menu">
               <a href="#" className="dropdown-item" onClick={props.onRename}>
                 {t('user.renameItem')}
diff --git a/resources/assets/src/views/user/Closet/LoadingClosetItem.tsx b/resources/assets/src/views/user/Closet/LoadingClosetItem.tsx
new file mode 100644
index 00000000..a1a718a6
--- /dev/null
+++ b/resources/assets/src/views/user/Closet/LoadingClosetItem.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import styled from '@emotion/styled'
+import Skeleton from 'react-loading-skeleton'
+import { Card, DropdownButton } from './styles'
+
+const ItemNameSkeleton = styled(Skeleton)`
+  width: 150px;
+`
+
+const LoadingClosetItem: React.FC = () => (
+  <Card className="card mr-3 mb-3">
+    <div className="card-body"></div>
+    <div className="card-footer pb-2 pt-2 pl-1 pr-1">
+      <div className="container d-flex justify-content-between">
+        <ItemNameSkeleton />
+        <span className="d-inline-block">
+          <DropdownButton>
+            <i className="fas fa-cog" />
+          </DropdownButton>
+        </span>
+      </div>
+    </div>
+  </Card>
+)
+
+export default LoadingClosetItem
diff --git a/resources/assets/src/views/user/Closet/index.tsx b/resources/assets/src/views/user/Closet/index.tsx
index aca03a4b..cd2f7358 100644
--- a/resources/assets/src/views/user/Closet/index.tsx
+++ b/resources/assets/src/views/user/Closet/index.tsx
@@ -12,9 +12,9 @@ import {
   TextureType,
 } from '@/scripts/types'
 import urls from '@/scripts/urls'
-import Loading from '@/components/Loading'
 import Pagination from '@/components/Pagination'
 import ClosetItem from './ClosetItem'
+import LoadingClosetItem from './LoadingClosetItem'
 import Previewer from './Previewer'
 import ModalApply from './ModalApply'
 import removeClosetItem from './removeClosetItem'
@@ -193,7 +193,11 @@ const Closet: React.FC = () => {
         </div>
         <div className="card-body">
           {isLoading ? (
-            <Loading />
+            <div className="d-flex flex-wrap">
+              {new Array(6).fill(null).map((_, i) => (
+                <LoadingClosetItem key={i} />
+              ))}
+            </div>
           ) : items.length === 0 ? (
             <div className="text-center p-3">
               {search ? (
diff --git a/resources/assets/src/views/user/Closet/styles.ts b/resources/assets/src/views/user/Closet/styles.ts
new file mode 100644
index 00000000..1deb7913
--- /dev/null
+++ b/resources/assets/src/views/user/Closet/styles.ts
@@ -0,0 +1,22 @@
+import styled from '@emotion/styled'
+
+export const Card = styled.div`
+  width: 235px;
+  transition-property: box-shadow;
+  transition-duration: 0.3s;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  .card-body {
+    background-color: #eff1f0;
+  }
+`
+
+export const DropdownButton = styled.span`
+  color: var(--gray);
+  :hover {
+    color: #000;
+  }
+`
diff --git a/resources/assets/tests/views/user/Closet.test.tsx b/resources/assets/tests/views/user/Closet.test.tsx
index ee07efb7..945a6a80 100644
--- a/resources/assets/tests/views/user/Closet.test.tsx
+++ b/resources/assets/tests/views/user/Closet.test.tsx
@@ -63,12 +63,6 @@ afterEach(() => {
   document.querySelector('#previewer')!.remove()
 })
 
-test('loading indicator', () => {
-  fetch.get.mockResolvedValue(createPaginator([]))
-  const { queryByTitle } = render(<Closet />)
-  expect(queryByTitle('Loading...')).toBeInTheDocument()
-})
-
 test('empty closet', async () => {
   fetch.get.mockResolvedValue(createPaginator([]))