The white line not showing on the first render in NextJS 13

[Alexandru Roberto Beldiman]

When i scroll down to the component in which the vertical timeline is, it shows the cards but the line is invisible, only on the second render (when i edit my file for example) the line appears. Anyone had this issue before? I have the same code in React.js and works, is it a problem with nextjs?

[captaincrackerjack]

I have the opposite issue, the line appears upon first render, but after reloading the page, disappears from view. Not sure how to fix either.

[Alex Nguyen]

Had a similar issue where the line didn't appear until about a second later. Previously I had the default animate on so this was hiding the issue.

I added the default timeline styles (style.min.css) into my main CSS and just set the background colour for the line:

.vertical-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  height: 100%;
  width: 4px;
  background: white; /* var(--line-color) */
}

The timeline component is also lazy loaded in my project. Working perfectly for me after this in Next.js 13 & app router.

[codeXplorer]

Having alignemnt issues. I am unable to resize content box. How to align and set width of the content box?