OLDEN DAYS vs BEST METHOD

[ChenXiu]

Olden days:
1.) Visitor fills out form
2.) Visitor clicks submit button
3.) Page looks stalled forever while php/cURL script retrievs shipping label from slow 3rd party server.
4.) While waiting, Visitor ponders how they hate slow websites and then unplugs computer.

Today (year 2021)
1.) Visitor fills out form
2.) Visitor clicks submit button
3.) Then what? What are the "best practices" implemented now?
...... Based on today's self-study, it appears this is a good technique:
      • Visitor clicks submit button.
      • Skeleton page appears that says "Thank you please wait while your shipping label is loaded"
      • Shipping label appears
      • Visitor ponders "What a neat fast website."

I'm thinking I could do it like this:
#1.) I turn that "final page" (that slow one that uses cURL to retrieve shipping label) into an Ajax target.
#2.) When the visitor clicks submit button, they immediately see my skeleton page (which actually targets the Ajax target)
#3.) Shipping label magically appears.

Am I on the right track?

Or, at my skill level (a " . 5 " on a scale of 1 to 10) would I be better off to leave things as they are, but simply add an animation overlay while the cURL script runs?

As I'm typing out this question.... it appears the actual issue is the default behavior:  $_POST pages stay there until all scripts finish running, then the final page loads. I am trying to provide the appearance of a "final page" immediately loading before the scripts finish running.....

[requinix]

There could be some minor differences based on how the system actually works, but yes: that's more or less correct.

If the result of submitting the form is only showing a picture then it'll probably be easier if you don't use a new page:
1. Submit the form data through AJAX.
2. As that request begins processing, use some sort of busy placeholder (modern designs have spinning circles) where the image will appear so the user knows something is happening. You'll also probably want to prevent additional form submissions, such as disabling the submit button.
3. When the request completes it returns the image. That could be a URL or it could be a raw image.
4. Put that image where the placeholder was.

[ChenXiu]

@Requinix, thank you. I tried your suggestion using Ajax and it works great. And thank you for the suggestion to disable the submit button to prevent additional submissions, I had not thought about that.

Then, I tried the basic "dim the page, and show spinner" (where clicking the submit button "onClick" changes a dark-full-page-with-spinner from "display:none;" to "display:block;").

The Ajax method looks better for pages that take a really long time to load.

The javascript display/show method "feels" better for faster-loading pages.

I ended up going with the the first part of your reply ("...it'll probably be easier if you don't use a new page").

In my case where the 3rd party Shipping Label Generating Service takes exactly 3 seconds, implementing the easier "display:none / display:block" style looked best. Oddly, it changed my perception of time -- it made the 3 Seconds "feel" like only a half second. Weird. (Maybe that circle spinner causes a temporary hypnosis 😀 )

Thank you.

Edited June 27, 2021 by ChenXiu