From d6c92fec620140d556999720978c29f06ce1712f Mon Sep 17 00:00:00 2001
From: keyan <keyan.kousha+huumn@gmail.com>
Date: Wed, 26 Apr 2023 11:54:41 -0500
Subject: [PATCH] prevent layout shift when loading dupes

---
 components/link-form.js | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/components/link-form.js b/components/link-form.js
index 07c5bd18..e62bc647 100644
--- a/components/link-form.js
+++ b/components/link-form.js
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState } from 'react'
 import { Form, Input, SubmitButton } from '../components/form'
 import { useRouter } from 'next/router'
 import { gql, useApolloClient, useLazyQuery, useMutation } from '@apollo/client'
@@ -118,6 +118,7 @@ export function LinkForm ({ item, editThreshold }) {
         required
         autoFocus
         clear
+        autoComplete='off'
         overrideValue={data?.pageTitleAndUnshorted?.unshorted}
         hint={editThreshold
           ? <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'
               />
             </div>)
-          : <FeeButton
-              baseFee={1} parentId={null} text='post' disabled={postDisabled}
-              ChildButton={SubmitButton} variant='secondary'
-            />}
+          : (
+            <div className='d-flex align-items-center'>
+              <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>
       {!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 &&
             <div className='mt-3'>
               <AccordianItem