search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
124.72k stars 26.62k forks source link

Loading page mismatch in app router directory #56344

Open nisabmohd opened 11 months ago

nisabmohd commented 11 months ago

Link to the code that reproduces this issue

https://github.com/nisabmohd/Personal-Blog/tree/master/src/app/blog/%5Bslug%5D

To Reproduce

In app directory the current folder structure the issue being produced is:

   |── app
    └── blog
        ├── loading.tsx
        ├── page.tsx
        └──  [slug]
                 ├── loading.tsx
                 ├── page.tsx

when im opening /blog/singleton the loading of [slug]/loading isn't showing instead it shows /blog/loading, I noticed a glitch between those loadings.

Current vs. Expected behavior

Expected behavior should be the loading of current file needs to be displayed instated of parent directory loading page.

Verify canary release

Provide environment information

nextjs 13.5.3
app router
dynamic route url

Which area(s) are affected? (Select all that apply)

App Router

Additional context

No response

mmpdrosa commented 9 months ago

Any solution?

Edit by maintainers: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

raRaRa commented 7 months ago

Same issue here: https://nextjs-forum.com/post/1204464797979250718

jstoxrocky commented 5 months ago

Same bug discussed here: https://github.com/vercel/next.js/discussions/59627

JesseOSullivan commented 4 months ago

Is this being address or does anyone have a fix?

zsombor-guti commented 4 months ago

Still there on 14.1.4 and 14.2.3 as well...

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

jakevollkommer commented 3 months ago

we really need an answer if this is intended behavior

ghost commented 3 months ago

I've encountered a similar issue with loading skeletons in Next.js 14 using the app directory. When navigating through internal links, the wrong loading skeleton is sometimes displayed (e.g., state loading skeleton instead of place loading skeleton).

app/
  [countrySlug]/
    loading.js
    page.js
    [stateSlug]/
      loading.js
      page.js
      [citySlug]/
        loading.js
        page.js
        [nameSlug]/
          loading.js
          page.js

However, when directly entering the URL or reloading on the last nested page, it shows the correct loading screen.