refactor: update button rendering logic in connector views to improve loading state handling

surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-connect-view.tsx

@@ -144,18 +144,14 @@ export const ConnectorConnectView: FC<ConnectorConnectViewProps> = ({
 					type="button"
 					onClick={handleFormSubmit}
 					disabled={isSubmitting}
-					className="text-xs sm:text-sm min-w-[140px] disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none"
+					className="relative text-xs sm:text-sm min-w-[140px] disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none"
 				>
-					{isSubmitting ? (
+					<span className={isSubmitting ? "opacity-0" : ""}>
-						<>
+						{connectorType === "MCP_CONNECTOR"
-							<Spinner size="sm" className="mr-2" />
+							? "Connect"
-							Connecting
+							: `Connect ${getConnectorTypeDisplay(connectorType)}`}
-						</>
+					</span>
-					) : connectorType === "MCP_CONNECTOR" ? (
+					{isSubmitting && <Spinner size="sm" className="absolute" />}
-						"Connect"
-					) : (
-						`Connect ${getConnectorTypeDisplay(connectorType)}`
-					)}
 				</Button>
 			</div>
 		</div>

surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-edit-view.tsx

@@ -369,16 +369,10 @@ export const ConnectorEditView: FC<ConnectorEditViewProps> = ({
 								size="sm"
 								onClick={handleDisconnectConfirm}
 								disabled={isDisconnecting}
-								className="text-xs sm:text-sm flex-1 sm:flex-initial h-10 sm:h-auto py-2 sm:py-2"
+								className="relative text-xs sm:text-sm flex-1 sm:flex-initial h-10 sm:h-auto py-2 sm:py-2"
 							>
-								{isDisconnecting ? (
+								<span className={isDisconnecting ? "opacity-0" : ""}>Confirm Disconnect</span>
-									<>
+								{isDisconnecting && <Spinner size="sm" className="absolute" />}
-										<Spinner size="sm" className="mr-2" />
-										Disconnecting
-									</>
-								) : (
-									"Confirm Disconnect"
-								)}
 							</Button>
 							<Button
 								variant="ghost"
@@ -415,10 +409,10 @@ export const ConnectorEditView: FC<ConnectorEditViewProps> = ({
 					<Button
 						onClick={onSave}
 						disabled={isSaving || isDisconnecting}
-						className="text-xs sm:text-sm flex-1 sm:flex-initial h-12 sm:h-auto py-3 sm:py-2"
+						className="relative text-xs sm:text-sm flex-1 sm:flex-initial h-12 sm:h-auto py-3 sm:py-2"
 					>
-						{isSaving && <Spinner size="sm" className="mr-2" />}
+						<span className={isSaving ? "opacity-0" : ""}>Save Changes</span>
-						Save Changes
+						{isSaving && <Spinner size="sm" className="absolute" />}
 					</Button>
 				)}
 			</div>

surfsense_web/components/assistant-ui/connector-popup/views/connector-accounts-list-view.tsx

@@ -174,7 +174,7 @@ export const ConnectorAccountsListView: FC<ConnectorAccountsListViewProps> = ({
 							)}
 						</div>
 						<span className="text-xs sm:text-sm font-medium">
-							{isConnecting ? "Connecting" : buttonText}
+							{buttonText}
 						</span>
 					</button>
 				</div>

surfsense_web/components/assistant-ui/connector-popup/views/youtube-crawler-view.tsx

@@ -335,16 +335,12 @@ export const YouTubeCrawlerView: FC<YouTubeCrawlerViewProps> = ({ searchSpaceId,
 				<Button
 					onClick={handleSubmit}
 					disabled={isSubmitting || isFetchingPlaylist || videoTags.length === 0}
-					className="text-xs sm:text-sm min-w-[140px] disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none"
+					className="relative text-xs sm:text-sm min-w-[140px] disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none"
 				>
-					{isSubmitting ? (
+					<span className={isSubmitting ? "opacity-0" : ""}>
-						<>
+						{t("submit")}
-							<Spinner size="sm" className="mr-2" />
+					</span>
-							{t("processing")}
+					{isSubmitting && <Spinner size="sm" className="absolute" />}
-						</>
-					) : (
-						t("submit")
-					)}
 				</Button>
 			</div>
 		</div>