ekzyis/stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix qr layout shift

Browse Source
This commit is contained in:
keyan 2023-08-11 16:52:24 -05:00
parent 73aa0d2d44
commit 63dd5d4d09
3 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/invoice.js
View File

@ -118,7 +118,7 @@ const ActionInvoice = ({ id, hash, hmac, errorCount, repeat, ...props }) => {
return <div>error</div>
}
if (!data || loading) {
return <QrSkeleton status='loading' />
return <QrSkeleton description status='loading' />
}
let errorStatus = 'Something went wrong trying to perform the action after payment.'

7
components/qr.js
View File

@ -37,11 +37,12 @@ export default function Qr ({ asIs, value, webLn, statusVariant, description, st
)
}
export function QrSkeleton ({ status }) {
export function QrSkeleton ({ status, description }) {
return (
<>
<div className='h-auto w-100 clouds' style={{ paddingTop: 'min(300px + 2rem, 100%)', maxWidth: 'calc(300px + 2rem)' }} />
<div className='mt-3 w-100'>
<div className='h-auto mx-auto w-100 clouds' style={{ paddingTop: 'min(300px, 100%)', maxWidth: 'calc(300px)' }} />
{description && <div className='mt-1 fst-italic text-center text-muted invisible'>.</div>}
<div className='my-3 w-100'>
<InputSkeleton />
</div>
<InvoiceStatus variant='default' status={status} />

2
pages/invoices/[id].js
View File

@ -19,7 +19,7 @@ export default function FullInvoice () {
return (
<CenterLayout>
{error && <div>{error.toString()}</div>}
{data ? <Invoice invoice={data.invoice} /> : <QrSkeleton status='loading' />}
{data ? <Invoice invoice={data.invoice} /> : <QrSkeleton description status='loading' />}
</CenterLayout>
)
}