Improving the loading skeleton bug example

In the example here https://nextjs.org/learn/dashboard-app/streaming#fixing-the-loading-skeleton-bug-with-route-groups it's claimed that

Right now, your loading skeleton will apply to the invoices and customers pages too. This is because in Next.js, files nest inside each other. Since loading.tsx is a level higher than /invoices/page.tsx and /customers/page.tsx, it's also applied to those pages.

However, given that there's no rendering or data fetching logic wired up with customers and invoices pages, it's difficult to demonstrate what this bug actually means.

I propose the following improvements to be considered:

1. Include a console.log inside the loading.tsx component
2. Instruct the user to refresh the page while visiting the other parts of the application, to confirm that the loading component does in fact gets called
3. Instruct the user do the same thing again after the route group creation, and notice that the console.log message doesn't appear because the loading component doesn't load

[StephDietz]

@thanosngplus thanks for the feedback, this is a good suggestion! We have a PR adding this :)