Add in loader spinners within each button in the Logs page. Currently it takes a very long time to load players/stats/etc. This is understandable given the amount of data. While the query is going on behind the scenes, please add loaders into the buttons — Player, Stats, Min/Max Timestamps (and make them non-clickable) — so that is it clear what the user is waiting on. Here is the filter code: import { map } from 'lodash' import React from 'react' import { Button } from 'reactstrap' import * as Dropdowns from './dropdowns' const isSubmittable = filterOptions => { if ( !filterOptions.sport || !filterOptions.schema || !filterOptions.event ) return false return true } const BetFeedFilters = props => { const { metadata, selectedMetadata, updateApiDropdown, filterOptions, events, players, stats, timestamps, submitApiCall, loading } = props if (!metadata) return return ( Query DB ) } export default BetFeedFilters
Add in loader spinners within each button in the Logs page. Currently it takes a very long time to load players/stats/etc. This is understandable given the amount of data. While the query is going on behind the scenes, please add loaders into the buttons — Player, Stats, Min/Max Timestamps (and make them non-clickable) — so that is it clear what the user is waiting on.
Here is the filter code:
import { map } from 'lodash'
import React from 'react'
import { Button } from 'reactstrap'
import * as Dropdowns from './dropdowns'
const isSubmittable = filterOptions => {
if (
!filterOptions.sport
|| !filterOptions.schema
|| !filterOptions.event
) return false
return true
}
const BetFeedFilters = props => {
const { metadata, selectedMetadata, updateApiDropdown, filterOptions, events, players, stats, timestamps, submitApiCall, loading } = props
if (!metadata) return <div></div>
return (
<div style={{ paddingTop: 10, paddingBottom: 10, display: 'flex', flexDirection: 'column', gap: 20, }}>
<Dropdowns.Single.Sport
updateDropdown={ updateApiDropdown }
value={ filterOptions.sport }
sports={ Object.keys(metadata) }
/>
<Dropdowns.Single.Schema
updateDropdown={ updateApiDropdown }
value={ filterOptions.schema }
sport={ filterOptions.sport }
metadata={ metadata }
/>
<Dropdowns.Single.Event
updateDropdown={ updateApiDropdown }
sport={ filterOptions.sport }
events={ events }
value={ filterOptions.event }
/>
<div style={{ borderBottom: '1px solid #ccc' }}></div>
<Dropdowns.Single.Player
updateDropdown={ updateApiDropdown }
sport={ filterOptions.sport }
players={ players }
value={ filterOptions.player }
selectedMetadata={ selectedMetadata }
/>
<Dropdowns.Multi.Stats
updateDropdown={ updateApiDropdown }
sport={ filterOptions.sport }
stats={ stats }
value={ filterOptions.stats }
selectedMetadata={ selectedMetadata }
/>
<Dropdowns.Single.Timestamp
updateDropdown={ updateApiDropdown }
minOrMax='Min'
timestamps={ timestamps }
value={ filterOptions.timestampMin }
selectedMetadata={ selectedMetadata }
/>
<Dropdowns.Single.Timestamp
updateDropdown={ updateApiDropdown }
minOrMax='Max'
timestamps={ timestamps }
value={ filterOptions.timestampMax }
selectedMetadata={ selectedMetadata }
/>
<div style={{ borderBottom: '1px solid #ccc' }}></div>
<Button
color="primary"
disabled={!isSubmittable(filterOptions) || loading}
onClick={submitApiCall}
>Query DB</Button>
</div>
)
}
export default BetFeedFilters
Trending now
This is a popular solution!
Step by step
Solved in 3 steps
