I've made a few posts over the past couple of days trying to nail down the issue I'm experiencing and I hope someone can help me get to the bottom of this.

Relevant Directory in Repo: https://github.com/shroommu/pokemon-battler/tree/master/src/app/pokedex
Live Production URL: https://pokemon.alexakruckenberg.com/pokedex

The Problem:

I'm creating a Pokedex for a portfolio project. The page looks like the first attachment when loaded. The buttons on the left each route to a different pokedex entry for each Pokemon (ie the URL for the Pikachu page looks like https://pokemon.alexakruckenberg.com/pokedex/pikachu)

When navigating from Pikachu to Charizard by clicking one of the buttons, I expect the following to happen:
1. The URL should update to /pokedex/charizard
2. While pokedex/charizard is loading, a skeleton for the right side of the page should be displayed (see second attachment)
3. Once pokedex/charizard has loaded, the skeleton should disappear, and the page should update with Charizard's data.

As I have my project set up now, this works in the local environment. As soon as I push to production, the skeleton in my loading.js never renders. In production, upon clicking a button to navigate to another Pokemon, the routing can take up to 5 seconds with no indication to the user that anything is loading.

To reproduce this, just click between 3-4 buttons on the left side and I pretty much guarantee you'll see my issue. I can most often reproduce it if I scroll to and then click on Mew at the bottom of the list. (Probably because Mew is never pre-fetched by next/link as it's never visible in the viewport on page refresh).

What am I doing wrong here?