Loading page css breaks css precedence

### Link to the code that reproduces this issue https://codesandbox.io/p/devbox/5m3wl9 ### To Reproduce 1. Loading the main page 2. notice that the loading blue square appears (expected) 3. then the page loads and the square is still blue ### Current vs. Expected behavior The blue square's color should be overridden by the page styles but instead the loading page reverts it. Commenting out the loading page fixes it. ### Provide environment information ```bash Operating System: Platform: linux Arch: x64 Version: #1 SMP PREEMPT_DYNAMIC Sun Aug 6 20:05:33 UTC 2023 Available memory (MB): 4242 Available CPU cores: 2 Binaries: Node: 20.12.0 npm: 10.5.0 Yarn: 1.22.19 pnpm: 8.15.6 Relevant Packages: next: 15.0.4 // There is a newer version (15.1.6) available, upgrade recommended! eslint-config-next: 15.0.4 react: 19.0.0 react-dom: 19.0.0 typescript: 5.4.5 Next.js Config: output: N/A ⚠ There is a newer version (15.1.6) available, upgrade recommended! Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue. Read more - https://nextjs.org/docs/messages/opening-an-issue ``` ### Which area(s) are affected? (Select all that apply) CSS ### Which stage(s) are affected? (Select all that apply) next dev (local), next start (local), next build (local) ### Additional context _No response_