I’m currently working with Next.js 14 APP router and I need to implement a global loader that displays until the DOM is fully ready. Could you provide a detailed explanation of how to achieve this? Specifically, I’m looking for a solution that ensures the loader is visible across the entire application and disappears only when the DOM has completely loaded. What are the necessary steps and code snippets to accomplish this?