fix: Show button when fetching columns (#6891)

Improve UX when entering `Table Header Index` value

BEFORE: Generate Template Button was hidden when the new column header is getting fetched. There was no loader for a user to understand that data is being fetched.

NOW: Generate Template Button is always visible and goes in a loading state when user data is being fetched.

app/client/src/components/ads/Button.tsx

@@ -293,6 +293,7 @@ const btnFontStyles = (props: ThemeProp & ButtonProps): BtnFontType => {
 };
 
 const ButtonStyles = css<ThemeProp & ButtonProps>`
+  user-select: none;
   width: ${(props) =>
     props.width ? props.width : props.fill ? "100%" : "auto"};
   height: ${(props) => btnFontStyles(props).height}px;

app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx

@@ -128,8 +128,6 @@ const GENERATE_PAGE_MODE = {
   REPLACE_EMPTY: "REPLACE_EMPTY", // current page's content (DSL) is updated to template DSL. (same pageId)
 };
 
-//
-
 function GeneratePageSubmitBtn({
   disabled,
   isLoading,

app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GoogleSheetForm.tsx

@@ -361,7 +361,7 @@ function GoogleSheetForm(props: Props) {
         </>
       ) : null}
 
-      {selectedSheet.value && columnHeaderList.length
+      {selectedSheet.value
         ? renderSubmitButton({
             onSubmit,
             disabled: !columnHeaderList.length || isFetchingColumnHeaderList,