next.js icon indicating copy to clipboard operation
next.js copied to clipboard

Component Flickering while developing Next.js and Tailwind

Open berkaycirak opened this issue 1 year ago • 29 comments

Verify canary release

  • [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.3.0: Mon Jan 30 20:39:35 PST 2023; root:xnu-8792.81.3~2/RELEASE_ARM64_T8103
    Binaries:
      Node: 16.16.0
      npm: 8.11.0
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.3.2-canary.7
      eslint-config-next: 13.3.0
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Describe the Bug

While changing any content in UI component, component is flickering and flashing to its non styled version in a short time. I couldn't understand the reasons. In that video, you can see when I change "Giris" text to "Girisw", it flickers.

https://user-images.githubusercontent.com/81809211/234632784-440ad366-cc53-42d7-99a8-ae132e9f89ee.mov

Expected Behavior

No component flickering while changing some content in development environment

Which browser are you using? (if relevant)

Chrome

How are you deploying your application? (if relevant)

No response

berkaycirak avatar Apr 26 '23 15:04 berkaycirak