adjust qr skeleton for bolt11info

components/qr.js

@@ -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 />}
     </>
   )
 }

pages/invoices/[id].js

@@ -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>
   )
 }

pages/wallet/index.js

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