Change Details

Page changes are instant with no visual transition. Add Vue's <Transition> component around <RouterView> in App.vue with a simple fade or slide animation using Tailwind classes (opacity-0 → opacity-100).

Page changes are instant with no visual transition. Add Vue's <Transition> component around <RouterView> in App.vue with a simple fade or slide animation using Tailwind classes (opacity-0 → opacity-100). EDIT: This task should finalize the loading animation implementation and fix the scrollbar layout shift issue observed in the Incident History page. Currently, when the page loads, the loading spinner displays without a scrollbar, but once content appears and exceeds the viewport height, the scrollbar suddenly appears and shifts the entire page content to the left. This creates a jarring user experience where the whole website appears to jump. The fix should ensure consistent scrollbar behavior during both loading and loaded states to prevent this layout shift.

Page changes are instant with no visual transition. Add Vue's <Transition> component around <RouterView> in App.vue with a simple fade or slide animation using Tailwind classes (opacity-0 → opacity-100). EDIT: This task should finalize the loading animation implementation and fix the scrollbar layout shift issue observed in the Incident History page. Currently, when the page loads, the loading spinner displays without a scrollbar, but once content appears and exceeds the viewport height, the scrollbar suddenly appears and shifts the entire page content to the left. This creates a jarring user experience where the whole website appears to jump. The fix should ensure consistent scrollbar behavior during both loading and loaded states to prevent this layout shift.