Join Morten Rand-Hendriksen for an in-depth discussion in this video Add a loading spinner for a better user experience, part of WordPress: REST API.
- [Instructor] To wrap up this chapter, let's add one more user experience enhancement. A spinner that clearly shows to the visitor that the next post is being loaded up as we're making the AJAX requests. In the exercise files for this movie, 04_11, I made two small changes. In the JS folder, you'll find a new file called spinner.svg. This contains an SVG spinning graphic. And in style.css, I've added some basic CSS for the spinner. This is just a CSS animation that actually makes the item spin in the view.
Then, directly before we run AJAX, I'll say ajax-loader.show. Save that just to test it, go back to the browser and rebuild the page, scroll down, and there for a fraction of a second I'm sure you can see the spinner spinning. Then we also need to make sure the next post has a spinner, so we'll scroll down to where the post is being built, right here, and a spinner should appear directly after this anchor down here, which I'll put the post title.
So I'll go to single.php and just copy this for now. So it goes right here. Now, of course we can't use PHP to point at the spinner, but earlier in the course I added in a variable for the theme URI. So we can call theme_uri, the variable, and then JS/spinner.svg, save that, go back and reload the browser, here you saw the spinner for a second, then when I scroll down, you should see the spinner for a second again.
Might be a little bit hard to catch, but it's definitely there. Now of course, the spinner doesn't really make much sense when we're working on this local environment, but if I change the URL to target a live site on the web, this performance will be a little bit slower and you'll be able to see why this matters. So I'll scroll up here, until I find the URL, it's right here, and then just for a second I'm going to change the rest_url here to say https://mor10.com/wp-json/wp/v2/, save that, reload, and what should happen now is we're now loading content from mor10.com instead, which is a much slower service, so as a result you see the spinning takes a lot longer.
Now of course, once we get past the first previous post, this will no longer work, that's because mor10.com doesn't have those custom values in the JSON response, so we don't have what the script is looking for, that would be previous_post_ID, previous_post_title and previous_post_link, but that doesn't matter, because my demo now has to do with the spinner, and as you can see, now the spinner is working the way it's supposed to. So I'll change this back to the way it was, save, and test one more time. Spinner is working, infinite scroll is working, and everything looks exactly the way it's supposed to.
- Using a REST client to communicate with a REST API
- Reviewing available routes, endpoints, and arguments
- Adding custom post types and taxonomies
- Altering the API response
- Using PHP for resiliency
- Passing info using wp_localize_script()
- Setting up a REST API request through AJAX
- Outputting selected post data to the front end
- Formatting post data to match a theme
- Triggering AJAX for an infinite scroll effect
- Using AJAX to load subsequent responses