Recommended section: add spinner while searching
It takes a while sometimes, so it feels like not doing anything.
This commit is contained in:
parent
0939821963
commit
06f7cdbe25
2 changed files with 10 additions and 0 deletions
|
@ -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"
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue