From 9856157cec99146e8094e600a7214256d2e94f3a Mon Sep 17 00:00:00 2001
From: Pig Fang <g-plane@hotmail.com>
Date: Sat, 4 Jul 2020 17:12:26 +0800
Subject: [PATCH] tweak UI state

---
 .../views/admin/PlayersManagement/LoadingCard.tsx  | 14 ++++----------
 .../src/views/admin/PlayersManagement/index.tsx    |  4 ++--
 .../src/views/admin/PluginsManagement/index.tsx    |  8 ++++----
 .../assets/src/views/admin/PluginsMarket/index.tsx |  2 +-
 .../src/views/admin/ReportsManagement/index.tsx    |  2 +-
 .../assets/src/views/admin/Translations/index.tsx  |  2 +-
 .../views/admin/UsersManagement/LoadingCard.tsx    | 14 +++++---------
 .../src/views/admin/UsersManagement/index.tsx      |  4 ++--
 .../assets/src/views/skinlib/SkinLibrary/index.tsx |  4 ++--
 resources/assets/src/views/user/Closet/index.tsx   |  2 +-
 resources/assets/src/views/user/OAuth/index.tsx    |  2 +-
 resources/assets/src/views/user/Players/index.tsx  |  2 +-
 12 files changed, 25 insertions(+), 35 deletions(-)

diff --git a/resources/assets/src/views/admin/PlayersManagement/LoadingCard.tsx b/resources/assets/src/views/admin/PlayersManagement/LoadingCard.tsx
index 2f67bbfc..0b0394ed 100644
--- a/resources/assets/src/views/admin/PlayersManagement/LoadingCard.tsx
+++ b/resources/assets/src/views/admin/PlayersManagement/LoadingCard.tsx
@@ -15,22 +15,16 @@ const LoadingCard: React.FC = () => (
     <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>
+          <ShrinkedSkeleton width="120px" />
         </div>
+        <div className="col-2"></div>
       </div>
       <div>
         <div>
-          <ShrinkedSkeleton width="200px" />
+          <ShrinkedSkeleton width="150px" />
         </div>
         <div>
-          <ShrinkedSkeleton width="240px" />
+          <ShrinkedSkeleton width="180px" />
         </div>
       </div>
     </div>
diff --git a/resources/assets/src/views/admin/PlayersManagement/index.tsx b/resources/assets/src/views/admin/PlayersManagement/index.tsx
index 41ee6ae9..462e5374 100644
--- a/resources/assets/src/views/admin/PlayersManagement/index.tsx
+++ b/resources/assets/src/views/admin/PlayersManagement/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useLayoutEffect } from 'react'
 import { hot } from 'react-hot-loader/root'
 import { useImmer } from 'use-immer'
 import useIsLargeScreen from '@/scripts/hooks/useIsLargeScreen'
@@ -25,7 +25,7 @@ const PlayersManagement: React.FC = () => {
   const [query, setQuery] = useState('')
   const [textureUpdating, setTextureUpdating] = useState(-1)
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (isLargeScreen) {
       setIsTableMode(true)
     }
diff --git a/resources/assets/src/views/admin/PluginsManagement/index.tsx b/resources/assets/src/views/admin/PluginsManagement/index.tsx
index 2ac32e68..dc85ba15 100644
--- a/resources/assets/src/views/admin/PluginsManagement/index.tsx
+++ b/resources/assets/src/views/admin/PluginsManagement/index.tsx
@@ -10,7 +10,7 @@ import InfoBox from './InfoBox'
 import { Plugin } from './types'
 
 const PluginsManagement: React.FC = () => {
-  const [loading, setLoading] = useState(false)
+  const [isLoading, setIsLoading] = useState(true)
   const [plugins, setPlugins] = useImmer<Plugin[]>([])
   const [file, setFile] = useState<File | null>(null)
   const [isUploading, setIsUploading] = useState(false)
@@ -19,10 +19,10 @@ const PluginsManagement: React.FC = () => {
 
   useEffect(() => {
     const getPlugins = async () => {
-      setLoading(true)
+      setIsLoading(true)
       const plugins = await fetch.get<Plugin[]>('/admin/plugins/data')
       setPlugins(() => plugins)
-      setLoading(false)
+      setIsLoading(false)
     }
     getPlugins()
   }, [])
@@ -166,7 +166,7 @@ const PluginsManagement: React.FC = () => {
   return (
     <div className="row">
       <div className="col-lg-8">
-        {loading ? (
+        {isLoading ? (
           <Loading />
         ) : plugins.length === 0 ? (
           t('general.noResult')
diff --git a/resources/assets/src/views/admin/PluginsMarket/index.tsx b/resources/assets/src/views/admin/PluginsMarket/index.tsx
index e05ada48..1eca971c 100644
--- a/resources/assets/src/views/admin/PluginsMarket/index.tsx
+++ b/resources/assets/src/views/admin/PluginsMarket/index.tsx
@@ -14,7 +14,7 @@ enableMapSet()
 
 const PluginsMarket: React.FC = () => {
   const [plugins, setPlugins] = useImmer<Plugin[]>([])
-  const [isLoading, setIsLoading] = useState(false)
+  const [isLoading, setIsLoading] = useState(true)
   const [search, setSearch] = useState('')
   const [page, setPage] = useState(1)
   const [totalPages, setTotalPages] = useState(1)
diff --git a/resources/assets/src/views/admin/ReportsManagement/index.tsx b/resources/assets/src/views/admin/ReportsManagement/index.tsx
index 4bc2b087..622b2ab5 100644
--- a/resources/assets/src/views/admin/ReportsManagement/index.tsx
+++ b/resources/assets/src/views/admin/ReportsManagement/index.tsx
@@ -17,7 +17,7 @@ const ReportsManagement: React.FC = () => {
   const [reports, setReports] = useImmer<Report[]>([])
   const [page, setPage] = useState(1)
   const [totalPages, setTotalPages] = useState(1)
-  const [isLoading, setIsLoading] = useState(false)
+  const [isLoading, setIsLoading] = useState(true)
   const [query, setQuery] = useState('status:0 sort:-report_at')
   const [viewingTexture, setViewingTexture] = useState<Texture | null>(null)
 
diff --git a/resources/assets/src/views/admin/Translations/index.tsx b/resources/assets/src/views/admin/Translations/index.tsx
index 72142c5b..beee0737 100644
--- a/resources/assets/src/views/admin/Translations/index.tsx
+++ b/resources/assets/src/views/admin/Translations/index.tsx
@@ -12,7 +12,7 @@ import Row from './Row'
 
 const Translations: React.FC = () => {
   const [lines, setLines] = useImmer<Line[]>([])
-  const [isLoading, setIsLoading] = useState(false)
+  const [isLoading, setIsLoading] = useState(true)
   const [page, setPage] = useState(1)
   const [totalPages, setTotalPages] = useState(1)
 
diff --git a/resources/assets/src/views/admin/UsersManagement/LoadingCard.tsx b/resources/assets/src/views/admin/UsersManagement/LoadingCard.tsx
index 84324b7f..2b1fef76 100644
--- a/resources/assets/src/views/admin/UsersManagement/LoadingCard.tsx
+++ b/resources/assets/src/views/admin/UsersManagement/LoadingCard.tsx
@@ -16,20 +16,16 @@ const LoadingCard: React.FC = () => (
     <div className="info-box-content">
       <div className="row">
         <div className="col-10">
-          <Skeleton width="200px" />
-        </div>
-        <div className="col-2">
-          <span className="text-gray">
-            <i className="fas fa-cog"></i>
-          </span>
+          <Skeleton width="140px" />
         </div>
+        <div className="col-2"></div>
       </div>
       <div>
         <div>
-          <Skeleton width="200px" />
+          <Skeleton width="140px" />
         </div>
         <div>
-          <Skeleton width="200px" />
+          <Skeleton width="140px" />
         </div>
         <InfoTable className="row m-2 border-top border-bottom">
           <div className="col-sm-4 py-1 text-center">
@@ -52,7 +48,7 @@ const LoadingCard: React.FC = () => (
           </div>
         </InfoTable>
         <div>
-          <Skeleton width="240px" />
+          <Skeleton width="180px" />
         </div>
       </div>
     </div>
diff --git a/resources/assets/src/views/admin/UsersManagement/index.tsx b/resources/assets/src/views/admin/UsersManagement/index.tsx
index 86964564..5e059e7b 100644
--- a/resources/assets/src/views/admin/UsersManagement/index.tsx
+++ b/resources/assets/src/views/admin/UsersManagement/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useLayoutEffect } from 'react'
 import { hot } from 'react-hot-loader/root'
 import { useImmer } from 'use-immer'
 import useBlessingExtra from '@/scripts/hooks/useBlessingExtra'
@@ -29,7 +29,7 @@ const UsersManagement: React.FC = () => {
     permission: UserPermission.Admin,
   } as User)
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (isLargeScreen) {
       setIsTableMode(true)
     }
diff --git a/resources/assets/src/views/skinlib/SkinLibrary/index.tsx b/resources/assets/src/views/skinlib/SkinLibrary/index.tsx
index eb24f286..82f9f66d 100644
--- a/resources/assets/src/views/skinlib/SkinLibrary/index.tsx
+++ b/resources/assets/src/views/skinlib/SkinLibrary/index.tsx
@@ -17,7 +17,7 @@ import Item from './Item'
 import { Filter, LibraryItem } from './types'
 
 const SkinLibrary: React.FC = () => {
-  const [isLoading, setIsLoading] = useState(false)
+  const [isLoading, setIsLoading] = useState(true)
   const [items, setItems] = useState<LibraryItem[]>([])
   const [closet, setCloset] = useState<number[]>([])
   const [filter, setFilter] = useState<Filter>('skin')
@@ -253,7 +253,7 @@ const SkinLibrary: React.FC = () => {
             )}
           </div>
           <div className="card-footer">
-            <div className="float-right">
+            <div className="d-flex justify-content-center">
               <Pagination
                 page={page}
                 totalPages={totalPages}
diff --git a/resources/assets/src/views/user/Closet/index.tsx b/resources/assets/src/views/user/Closet/index.tsx
index cd2f7358..ecce0e24 100644
--- a/resources/assets/src/views/user/Closet/index.tsx
+++ b/resources/assets/src/views/user/Closet/index.tsx
@@ -30,7 +30,7 @@ const updater = debounce(
 )
 
 const Closet: React.FC = () => {
-  const [isLoading, setIsLoading] = useState(false)
+  const [isLoading, setIsLoading] = useState(true)
   const [category, setCategory] = useState<Category>('skin')
   const [search, setSearch] = useState('')
   const [query, setQuery] = useState('')
diff --git a/resources/assets/src/views/user/OAuth/index.tsx b/resources/assets/src/views/user/OAuth/index.tsx
index 25961b36..7c201305 100644
--- a/resources/assets/src/views/user/OAuth/index.tsx
+++ b/resources/assets/src/views/user/OAuth/index.tsx
@@ -14,7 +14,7 @@ type Exception = {
 
 const OAuth: React.FC = () => {
   const [apps, setApps] = useState<App[]>([])
-  const [isLoading, setIsLoading] = useState(false)
+  const [isLoading, setIsLoading] = useState(true)
   const [showModalCreate, setShowModalCreate] = useState(false)
 
   useEffect(() => {
diff --git a/resources/assets/src/views/user/Players/index.tsx b/resources/assets/src/views/user/Players/index.tsx
index 58264bfa..39d06438 100644
--- a/resources/assets/src/views/user/Players/index.tsx
+++ b/resources/assets/src/views/user/Players/index.tsx
@@ -16,7 +16,7 @@ import ModalReset from './ModalReset'
 
 const Players: React.FC = () => {
   const [players, setPlayers] = useState<Player[]>([])
-  const [isLoading, setIsLoading] = useState(false)
+  const [isLoading, setIsLoading] = useState(true)
   const [selected, setSelected] = useState(0)
   const [skin, setSkin] = useTexture()
   const [cape, setCape] = useTexture()