I was part of the team developing the front-end for the next evolution of TI's product pages, based on a modern decoupled service oriented architecture.
This was a large project requiring close collaboration with the back-end team as well as our UX Design team.
With TI's portfolio of 80,000+ products, each with its own associated specifications, training materials, primary and secondary associated parts, the complexity of upgrading the Product Web pages to a newer architecture and implementation of the UI/UX from a tabbed to a single page experience was a challenging and large undertaking involving different stakeholders and teams.
View an example page: here
View live: here
Web Component race conditions I encountered a race condition as I was tasked to fix a bug that caused the sticky chapter-nav to not populate with all of its chapter nav links correctly.
Using Chrome Dev Tools with a throttled network and breaking on the render code for the web component, I could isolate the moment Chapter-Nav was finding chapter-nav-anchors on the page and populating them as links in the sticky-nav. I could determine that the chapter-nav-anchor did not exist in the DOM when the chapter-nav is rendered given the asynchronous nature of how StencilJS web components are rendered/hydrated as the DOM is completing its page load.
Essentially the Chapter-Nav web component was querying for the Chapter-Nav-Anchors (positioned on the page to indicate where the anchors are), but during slow loads the Chapter-nav would render first before the Chapter-Nav-Anchors is on the DOM causing the Chapter-nav to fail in populating the link.
The solution we ended up implementing after going back and forth with my colleagues was to listen for the document page load event during the its component lifecycle when it finished loading ensuring that both it and the DOM has completely rendered before looking for the chapter nav anchors.