prevent layout shift when loading dupes
This commit is contained in:
parent
f2f205dc80
commit
d6c92fec62
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue