Next.js getServerSideProps show loading

I am using getServerSideProps in pages/post/index.js:

import React from "react";import Layout from "../../components/Layout";function Post({ post }) {  console.log("in render", post);  return (<Layout title={post.name}><pre>{JSON.stringify(post, undefined, 2)}</pre></Layout>  );}export async function getServerSideProps({ query }) {  return fetch(    `${process.env.API_URL}/api/post?id=${query.id}`  )    .then(result => result.json())    .then(post => ({ props: { post } }));}export default Post;

When I directly load /post/2 it works as expected but when I go from /posts to /post/2 by clicking on a link:

<Link  as={`/post/${post.id}`}  href={`/post?id=${post.id}`}>

It looks like nothing happens for 2 seconds (the api delay) and then the content shows. I can see in the network tab that _next/data/development/post/9.json is being loaded by fetchNextData.

I would like to show a loading spinner when I move from one route to another using next/Link but I can't find any documentation on getServerSideProps that allows me to do this.

When I directly go to /post/:id I'd like the data to be fetched server side and get a fully rendered page (works) but when I then move to another route the data should be fetched from the client (works). However; I would like to have a loading indicator and not have the UI freeze up for the duration of the data request.