Countries site using Next Js

@edu290386 Hi, thanks for your feedback, I'll keep it in mind to adjust the names of the border cities. Regarding your question, could you specify what you mean, I don't quite understand

@JAleXDesigN when you write and email and then click on contact button it shows like an animation of charging in your project of bookmark landing page

@edu290386 In the case of that solution for email validation, use a regular expression, the spinner is on the form but displays: none; when clicking the submit button, if the input value has a valid email format, it adds a screen - flex the spinner to show it and using a timeout after a few seconds, shows the message "Thanks for contact us!", If you don't have a valid email format, it directly displays the message "Oops, make sure it's an email". Using only Javascript it would be something like this:

function enviarForm(e) {
  e.preventDefault();

  if (emailRegEx.test(email.value)) {
    email.classList.remove("error-mail");
    const spinner = document.querySelector("#spinner");

    spinner.style.display = "flex";

    setTimeout(() => {
      spinner.style.display = "none";
      mensajeAlerta("Thank you for contacting us!!", "exito");
      form.reset();
    }, 2000);
  } else {
    mensajeAlerta("Whoops, make sure it´s an email.", "error");
    email.classList.add("error-mail");
  }
}

function mensajeAlerta(mensaje, tipo) {
  const parrafoError = document.createElement("p");
  parrafoError.textContent = mensaje;
  if (tipo === "error") {
    parrafoError.classList.add("error");
    form.insertBefore(parrafoError, document.querySelector("#submit"));
  } else {
    parrafoError.classList.add("exito");
    form.appendChild(parrafoError);
  }

  setTimeout(() => {
    parrafoError.remove();
  }, 3000);
}

If you use React you can do something similar to this

const emailRegex =
  /^(?!\.)[a-zA-Z0-9._%+-]+@(?!-)(?:[a-zA-Z0-9-]+\.)+(?:[a-zA-Z]{2,})$/;
const initialMessages = { error: "", success: "" };

const ContactForm = () => {
  const [email, setEmail] = useState("");
  const [loading, setLoading] = useState(false);
  const [messages, setMessages] = useState(initialMessages);

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    if (emailRegex.test(email)) {
      setLoading(true);
      setMessages(initialMessages);

      setTimeout(() => {
        setLoading(false);
        setEmail("");
        setMessages({ error: "", success: "Thanks for contact us!" });
      }, 3000);
    } else {
      setMessages({
        error: "Oops, make sure it's an email",
        success: "",
      });
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        aria-label="Email contact"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      {loading && <span>Loading..</span> /*Or your spinner component **/}
      {
        messages.error && (
          <span className="msg-error">{messages.error}</span>
        ) /**If there is an error message, render it */
      }
      {
        messages.success && (
          <span className="msg-success">{messages.success}</span>
        ) /** If there is an error success, render it*/
      }

      <button
        type="submit"
        disabled={loading}
      >
        Contact us
      </button>
    </form>
  );
};

export default ContactForm;