fix qr layout shift

components/invoice.js

@@ -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.'

components/qr.js

@@ -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='h-auto mx-auto w-100 clouds' style={{ paddingTop: 'min(300px, 100%)', maxWidth: 'calc(300px)' }} />
-      <div className='mt-3 w-100'>
+      {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} />

pages/invoices/[id].js

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