mirror of
https://github.com/oceanprotocol/commons.git
synced 2023-03-15 18:03:00 +01:00
add loading state
This commit is contained in:
parent
409d13b961
commit
5cc31940f0
|
@ -1,10 +1,11 @@
|
||||||
import React, { PureComponent } from 'react'
|
import React, { PureComponent } from 'react'
|
||||||
import { Link } from 'react-router-dom'
|
import { Link } from 'react-router-dom'
|
||||||
|
import Spinner from '../atoms/Spinner'
|
||||||
import Asset from '../molecules/Asset'
|
import Asset from '../molecules/Asset'
|
||||||
import styles from './AssetsUser.module.scss'
|
import styles from './AssetsUser.module.scss'
|
||||||
|
|
||||||
export default class AssetsUser extends PureComponent {
|
export default class AssetsUser extends PureComponent {
|
||||||
public state = { results: [] }
|
public state = { results: [], isLoading: true }
|
||||||
|
|
||||||
public componentDidMount() {
|
public componentDidMount() {
|
||||||
this.searchOcean()
|
this.searchOcean()
|
||||||
|
@ -21,8 +22,13 @@ export default class AssetsUser extends PureComponent {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const assets = await this.context.ocean.searchAssets(queryRequest)
|
|
||||||
this.setState({ results: assets })
|
try {
|
||||||
|
const assets = await this.context.ocean.searchAssets(queryRequest)
|
||||||
|
this.setState({ results: assets, isLoading: false })
|
||||||
|
} catch (error) {
|
||||||
|
this.setState({ isLoading: false })
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
public render() {
|
public render() {
|
||||||
|
@ -30,7 +36,9 @@ export default class AssetsUser extends PureComponent {
|
||||||
<div className={styles.assetsUser}>
|
<div className={styles.assetsUser}>
|
||||||
<h2 className={styles.subTitle}>Your Data Sets</h2>
|
<h2 className={styles.subTitle}>Your Data Sets</h2>
|
||||||
|
|
||||||
{this.state.results.length ? (
|
{this.state.isLoading ? (
|
||||||
|
<Spinner />
|
||||||
|
) : this.state.results.length ? (
|
||||||
<div className={styles.assets}>
|
<div className={styles.assets}>
|
||||||
{this.state.results.map((asset, index) => (
|
{this.state.results.map((asset, index) => (
|
||||||
<Asset key={index} asset={asset} />
|
<Asset key={index} asset={asset} />
|
||||||
|
|
Loading…
Reference in New Issue
Block a user