diff --git a/resources/assets/src/views/skinlib/Show/index.tsx b/resources/assets/src/views/skinlib/Show/index.tsx index 3a5204f5..c47610e7 100644 --- a/resources/assets/src/views/skinlib/Show/index.tsx +++ b/resources/assets/src/views/skinlib/Show/index.tsx @@ -1,6 +1,7 @@ import React, { useState, useEffect } from 'react' import { createPortal } from 'react-dom' import { hot } from 'react-hot-loader/root' +import Skeleton from 'react-loading-skeleton' import useBlessingExtra from '@/scripts/hooks/useBlessingExtra' import useEmitMounted from '@/scripts/hooks/useEmitMounted' import useMount from '@/scripts/hooks/useMount' @@ -25,6 +26,7 @@ const Previewer = React.lazy(() => import('@/components/Viewer')) const Show: React.FC = () => { const [texture, setTexture] = useState({} as Texture) + const [isLoading, setIsLoading] = useState(true) const [showModalApply, setShowModalApply] = useState(false) const [liked, setLiked] = useState(false) const nickname = useBlessingExtra('nickname') @@ -46,6 +48,7 @@ const Show: React.FC = () => { const texture = await fetch.get(url) setTexture(texture) + setIsLoading(false) } fetchInfo() }, []) @@ -331,48 +334,68 @@ const Show: React.FC = () => {
{t('skinlib.show.name')}
-
- {texture.name} -
- {canEdit && ( -
- + {isLoading ? ( +
+
+ ) : ( + +
+ {texture.name} +
+ {canEdit && ( +
+ +
+ )} +
)}
{t('skinlib.show.model')}
-
- {texture.type === TextureType.Cape - ? t('general.cape') - : texture.type} -
- {canEdit && ( -
- + {isLoading ? ( +
+
+ ) : ( + +
+ {texture.type === TextureType.Cape + ? t('general.cape') + : texture.type} +
+ {canEdit && ( +
+ +
+ )} +
)}
Hash
- {texture.hash} + {isLoading ? : texture.hash}
{t('skinlib.show.size')}
-
{texture.size} KB
+
+ {isLoading ? : {texture.size} KB} +