Recommended section: add spinner while searching

It takes a while sometimes, so it feels like not doing anything.
This commit is contained in:
infinite-persistence 2022-03-02 13:43:25 +08:00 committed by infinite-persistence
parent 0939821963
commit 06f7cdbe25
2 changed files with 10 additions and 0 deletions

View file

@ -3,6 +3,7 @@ import { SHOW_ADS, AD_KEYWORD_BLOCKLIST, AD_KEYWORD_BLOCKLIST_CHECK_DESCRIPTION
import React from 'react'; import React from 'react';
import ClaimList from 'component/claimList'; import ClaimList from 'component/claimList';
import ClaimListDiscover from 'component/claimListDiscover'; import ClaimListDiscover from 'component/claimListDiscover';
import Spinner from 'component/spinner';
import Ads from 'web/component/ads'; import Ads from 'web/component/ads';
import Card from 'component/common/card'; import Card from 'component/common/card';
import { useIsMobile, useIsMediumScreen } from 'effects/use-screensize'; import { useIsMobile, useIsMediumScreen } from 'effects/use-screensize';
@ -133,6 +134,11 @@ export default React.memo<Props>(function RecommendedContent(props: Props) {
} }
body={ body={
<div> <div>
{isSearching && (
<div className="empty empty--centered-tight">
<Spinner type="small" />
</div>
)}
{viewMode === VIEW_ALL_RELATED && ( {viewMode === VIEW_ALL_RELATED && (
<ClaimList <ClaimList
type="small" type="small"

View file

@ -391,6 +391,10 @@ img {
text-align: center; text-align: center;
padding: calc(var(--spacing-l) * 3) 0; padding: calc(var(--spacing-l) * 3) 0;
} }
.empty--centered-tight {
text-align: center;
padding: var(--spacing-l) 0;
}
.qr-code { .qr-code {
width: 134px; width: 134px;