prevent layout shift when loading dupes

This commit is contained in:
keyan 2023-04-26 11:54:41 -05:00
parent f2f205dc80
commit d6c92fec62
1 changed files with 15 additions and 11 deletions

View File

@ -1,4 +1,4 @@
import { useState } from 'react'; import { useState } from 'react'
import { Form, Input, SubmitButton } from '../components/form' import { Form, Input, SubmitButton } from '../components/form'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import { gql, useApolloClient, useLazyQuery, useMutation } from '@apollo/client' import { gql, useApolloClient, useLazyQuery, useMutation } from '@apollo/client'
@ -118,6 +118,7 @@ export function LinkForm ({ item, editThreshold }) {
required required
autoFocus autoFocus
clear clear
autoComplete='off'
overrideValue={data?.pageTitleAndUnshorted?.unshorted} overrideValue={data?.pageTitleAndUnshorted?.unshorted}
hint={editThreshold hint={editThreshold
? <div className='text-muted font-weight-bold'><Countdown date={editThreshold} /></div> ? <div className='text-muted font-weight-bold'><Countdown date={editThreshold} /></div>
@ -150,19 +151,22 @@ export function LinkForm ({ item, editThreshold }) {
parentId={null} text='save' ChildButton={SubmitButton} variant='secondary' parentId={null} text='save' ChildButton={SubmitButton} variant='secondary'
/> />
</div>) </div>)
: <FeeButton : (
baseFee={1} parentId={null} text='post' disabled={postDisabled} <div className='d-flex align-items-center'>
ChildButton={SubmitButton} variant='secondary' <FeeButton
/>} baseFee={1} parentId={null} text='post' disabled={postDisabled}
ChildButton={SubmitButton} variant='secondary'
/>
{dupesLoading &&
<div className='d-flex ml-3 justify-content-center'>
<Moon className='spin fill-grey' />
<div className='ml-2 text-muted' style={{ fontWeight: '600' }}>searching for dupes</div>
</div>}
</div>
)}
</div> </div>
{!item && {!item &&
<> <>
{dupesLoading &&
<div className='d-flex mt-2 justify-content-center'>
<Moon className='spin fill-grey' />
<div className='ml-3 text-muted' style={{ fontWeight: '600' }}>searching for dupes</div>
</div>
}
{dupesData?.dupes?.length > 0 && {dupesData?.dupes?.length > 0 &&
<div className='mt-3'> <div className='mt-3'>
<AccordianItem <AccordianItem