I’m facing an issue in my Angular application where CSS and JavaScript don’t apply correctly to a carousel component when fetching data from an external API. The data retrieval process takes a significant amount of time, and as a result, the carousel’s styles are not applied properly when the component first loads.
Here’s the situation:
Initial Load: The component takes a long time to fetch data from the API, causing the CSS for the carousel to not apply correctly.
Page Reload: When I reload the page, the carousel works perfectly, with the data loading from the cache and the CSS applying as it should.
I’ve attached screenshots below to show the difference in behavior between the initial load and after reloading the page.
Has anyone experienced a similar issue, and can you suggest any solutions to ensure that the CSS and JavaScript for the carousel are applied correctly even during the first load?
,
I’ve tried loading the script in the ngAfterViewInit lifecycle hook, but the CSS for the carousel doesn’t load correctly on the first attempt. However, when I reload the page, everything works as expected (the data loads from the cache, and there’s no delay).