open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Show loading indicator on comment submit

Browse Source
This commit is contained in:
Ian Philips 2022-05-18 10:08:31 -06:00
parent f17675bbcf
commit ca9e93fe47
2 changed files with 15 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/components/feed/feed-comments.tsx
View File

@ -23,6 +23,7 @@ import { SiteLink } from 'web/components/site-link'
import { BetStatusText } from 'web/components/feed/feed-bets' import { BetStatusText } from 'web/components/feed/feed-bets'
import { Col } from 'web/components/layout/col' import { Col } from 'web/components/layout/col'
import { getOutcomeProbability } from 'common/calculate' import { getOutcomeProbability } from 'common/calculate'
import { LoadingIndicator } from 'web/components/loading-indicator'
export function FeedCommentThread(props: { export function FeedCommentThread(props: {
contract: Contract contract: Contract
@ -372,14 +373,13 @@ export function CommentInput(props: {
Sign in to Comment Sign in to Comment
</button> </button>
)} )}
{user && ( {user && !isSubmitting && (
<button <button
disabled={isSubmitting}
className={clsx( className={clsx(
'btn text-transform: block capitalize', 'btn text-transform: block capitalize',
focused && comment focused && comment
? 'btn-outline btn-sm ' ? 'btn-outline btn-sm '
: 'btn-ghost btn-sm text-gray-500' : 'btn-ghost btn-sm pointer-events-none text-gray-500'
)} )}
onClick={() => { onClick={() => {
if (!focused) return if (!focused) return
@ -391,6 +391,9 @@ export function CommentInput(props: {
{parentComment || answerOutcome ? 'Reply' : 'Comment'} {parentComment || answerOutcome ? 'Reply' : 'Comment'}
</button> </button>
)} )}
{isSubmitting && (
<LoadingIndicator spinnerClassName={'border-gray-500'} />
)}
</Col> </Col>
</Row> </Row>
</div> </div>

12
web/components/loading-indicator.tsx
View File

@ -1,12 +1,18 @@
import clsx from 'clsx' import clsx from 'clsx'
export function LoadingIndicator(props: { className?: string }) { export function LoadingIndicator(props: {
const { className } = props className?: string
spinnerClassName?: string
}) {
const { className, spinnerClassName } = props
return ( return (
<div className={clsx('flex items-center justify-center', className)}> <div className={clsx('flex items-center justify-center', className)}>
<div <div
className="spinner-border inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-indigo-500 border-r-transparent" className={clsx(
'spinner-border inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-indigo-500 border-r-transparent',
spinnerClassName
)}
role="status" role="status"
/> />
</div> </div>