I have the following loading.js file but everytime I navigate to the page.js of the same folder it seems to clear the current page and load loading.js to it, but I want to overlay my loading.js to the current page, how do I do that?

import { faLeaf } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

export default function PageLoading() {
    return <div className="position-absolute container-fluid row h-100 p-4">
        <div className="my-auto mx-auto text-center">
            <div className="spinner-border d-block mx-auto border-0">
                <FontAwesomeIcon className="text-green" icon={faLeaf} />
            </div>
            Loading...
        </div>
    </div>
}