Giving transition animations to loading components that come with next.js 13

I want to make a transition animation for the loading component that raises the opacity from 0 to 1. The animation works, but when switching to the next page it empties the page and a blank page appears in the background during the transition.

I found a solution for this problem but it caused other problems. I put the components on the page in the loading component and it transitions smoothly, but if the page has a loading component, it renders its own component, which causes confusion.

another issue is that the loading component is instantly removed after the page has loaded. What I want to do here is to make a transition by lowering the opacity before the component is removed. actually I can add an animation to the beginning of each page that will run after the page has loaded, but is there a way to do this on the loading component?

I’ve been trying for a few days and although I tried a few different ways, I couldn’t get the result I wanted, I would be glad if you could help.