adjust qr skeleton for bolt11info

This commit is contained in:
keyan 2024-04-16 16:20:13 -05:00
parent 8eee1c2a71
commit 052e36f6ed
3 changed files with 5 additions and 3 deletions

View File

@ -4,6 +4,7 @@ import InvoiceStatus from './invoice-status'
import { useEffect } from 'react'
import { useWebLN } from './webln'
import SimpleCountdown from './countdown'
import Bolt11Info from './bolt11-info'
export default function Qr ({ asIs, value, webLn, statusVariant, description, status }) {
const qrValue = asIs ? value : 'lightning:' + value.toUpperCase()
@ -39,7 +40,7 @@ export default function Qr ({ asIs, value, webLn, statusVariant, description, st
)
}
export function QrSkeleton ({ status, description }) {
export function QrSkeleton ({ status, description, bolt11Info }) {
return (
<>
<div className='h-auto mx-auto w-100 clouds' style={{ paddingTop: 'min(300px, 100%)', maxWidth: 'calc(300px)' }} />
@ -51,6 +52,7 @@ export function QrSkeleton ({ status, description }) {
<div className='text-muted text-center invisible'>
<SimpleCountdown date={Date.now()} />
</div>
{bolt11Info && <Bolt11Info />}
</>
)
}

View File

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

View File

@ -128,7 +128,7 @@ export function FundForm () {
}, [])
if (called && !error) {
return <QrSkeleton description status='generating' />
return <QrSkeleton description status='generating' bolt11Info />
}
return (