add skeleton for closet

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'
-
+import { Card, DropdownButton } from './styles'
-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;
-  }
-`
 
 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" />
+              <i className="fas fa-cog" />
-            </span>
+            </DropdownButton>
             <div className="dropdown-menu">
               <a href="#" className="dropdown-item" onClick={props.onRename}>
                 {t('user.renameItem')}

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

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 ? (

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

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([]))