add skeleton for players management

resources/assets/src/views/admin/PlayersManagement/Card.tsx

@@ -1,18 +1,8 @@
-/** @jsx jsx */
-import { jsx, css } from '@emotion/core'
+import React from 'react'
 import { t } from '@/scripts/i18n'
 import { showModal } from '@/scripts/notify'
 import { Player } from '@/scripts/types'
-import * as breakpoints from '@/styles/breakpoints'
-
-const style = css`
-  width: 48%;
-  margin: 7px;
-
-  ${breakpoints.lessThan(breakpoints.Breakpoint.lg)} {
-    width: 98%;
-  }
-`
+import { Box } from './styles'
 
 interface Props {
   player: Player
@@ -65,7 +55,7 @@ const Card: React.FC<Props> = (props) => {
   }
 
   return (
-    <div className="info-box" css={style}>
+    <Box className="info-box">
       <div className="info-box-icon">
         <img
           className="bs-avatar"
@@ -149,7 +139,7 @@ const Card: React.FC<Props> = (props) => {
           </div>
         </div>
       </div>
-    </div>
+    </Box>
   )
 }
 

resources/assets/src/views/admin/PlayersManagement/LoadingCard.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import styled from '@emotion/styled'
+import Skeleton from 'react-loading-skeleton'
+import { Box } from './styles'
+
+const ShrinkedSkeleton = styled(Skeleton)<{ width?: string }>`
+  width: ${(props) => props.width};
+`
+
+const LoadingCard: React.FC = () => (
+  <Box className="info-box">
+    <div className="info-box-icon">
+      <Skeleton circle height={50} width={50} />
+    </div>
+    <div className="info-box-content">
+      <div className="row">
+        <div className="col-10">
+          <ShrinkedSkeleton width="150px" />
+        </div>
+        <div className="col-2">
+          <div className="float-right dropdown">
+            <span className="text-gray">
+              <i className="fas fa-cog"></i>
+            </span>
+          </div>
+        </div>
+      </div>
+      <div>
+        <div>
+          <ShrinkedSkeleton width="200px" />
+        </div>
+        <div>
+          <ShrinkedSkeleton width="240px" />
+        </div>
+      </div>
+    </div>
+  </Box>
+)
+
+export default LoadingCard

resources/assets/src/views/admin/PlayersManagement/LoadingRow.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import styled from '@emotion/styled'
+import Skeleton from 'react-loading-skeleton'
+
+const ThickSkeleton = styled(Skeleton)`
+  line-height: 2;
+`
+
+const LoadingRow: React.FC = () => (
+  <tr>
+    <td colSpan={6}>
+      <ThickSkeleton />
+    </td>
+  </tr>
+)
+
+export default LoadingRow

resources/assets/src/views/admin/PlayersManagement/index.tsx

@@ -7,11 +7,12 @@ import * as fetch from '@/scripts/net'
 import { Player, Paginator } from '@/scripts/types'
 import { toast, showModal } from '@/scripts/notify'
 import urls from '@/scripts/urls'
-import Loading from '@/components/Loading'
 import Pagination from '@/components/Pagination'
 import Header from '../UsersManagement/Header'
 import Card from './Card'
+import LoadingCard from './LoadingCard'
 import Row from './Row'
+import LoadingRow from './LoadingRow'
 import ModalUpdateTexture from './ModalUpdateTexture'
 
 const PlayersManagement: React.FC = () => {
@@ -205,15 +206,11 @@ const PlayersManagement: React.FC = () => {
           </label>
         </div>
       </Header>
-      {isLoading ? (
-        <div className="card-body">
-          <Loading />
-        </div>
-      ) : players.length === 0 ? (
+      {players.length === 0 && !isLoading ? (
         <div className="card-body text-center">{t('general.noResult')}</div>
       ) : isTableMode ? (
         <div className="card-body table-responsive p-0">
-          <table className="table table-striped">
+          <table className={`table ${isLoading ? '' : 'table-striped'}`}>
             <thead>
               <tr>
                 <th>PID</th>
@@ -225,8 +222,27 @@ const PlayersManagement: React.FC = () => {
               </tr>
             </thead>
             <tbody>
-              {players.map((player, i) => (
-                <Row
+              {isLoading
+                ? new Array(10).fill(null).map((_, i) => <LoadingRow key={i} />)
+                : players.map((player, i) => (
+                    <Row
+                      key={player.pid}
+                      player={player}
+                      onUpdateName={() => handleUpdateName(player, i)}
+                      onUpdateOwner={() => handleUpdateOwner(player, i)}
+                      onUpdateTexture={() => setTextureUpdating(i)}
+                      onDelete={() => handleDelete(player)}
+                    />
+                  ))}
+            </tbody>
+          </table>
+        </div>
+      ) : (
+        <div className="card-body d-flex flex-wrap">
+          {isLoading
+            ? new Array(10).fill(null).map((_, i) => <LoadingCard key={i} />)
+            : players.map((player, i) => (
+                <Card
                   key={player.pid}
                   player={player}
                   onUpdateName={() => handleUpdateName(player, i)}
@@ -235,21 +251,6 @@ const PlayersManagement: React.FC = () => {
                   onDelete={() => handleDelete(player)}
                 />
               ))}
-            </tbody>
-          </table>
-        </div>
-      ) : (
-        <div className="card-body d-flex flex-wrap">
-          {players.map((player, i) => (
-            <Card
-              key={player.pid}
-              player={player}
-              onUpdateName={() => handleUpdateName(player, i)}
-              onUpdateOwner={() => handleUpdateOwner(player, i)}
-              onUpdateTexture={() => setTextureUpdating(i)}
-              onDelete={() => handleDelete(player)}
-            />
-          ))}
         </div>
       )}
       <div className="card-footer">

resources/assets/src/views/admin/PlayersManagement/styles.ts

@@ -0,0 +1,11 @@
+import styled from '@emotion/styled'
+import * as breakpoints from '@/styles/breakpoints'
+
+export const Box = styled.div`
+  width: 48%;
+  margin: 7px;
+
+  ${breakpoints.lessThan(breakpoints.Breakpoint.lg)} {
+    width: 98%;
+  }
+`