I have been building an app, a sort of social media platform for Nigerian architects. The app is Archifolios . The stack I have been using is Laravel for the backend functionality and Vue Js for the frontend, both stitched together using Inertia Js. This is a very simple stack to get the hang of if you already are comfortable with Vue Js.

The basic structure of the app is that users make posts which can be commented on and liked, by other users. In the timeline view, I extracted the posts into a component, one to show each post, and the comments were only loaded when a toggle was clicked to show/hide the comments. These comments were then fetched using an axios call to the backend. Transitions worked seamlessly here, to animate the changes in the comments and I was very satisfied.

The next part of the app on clicking on the post image, would be a details page where all of the post's images would be shown in some sort of carousel. Here, the comments were loaded along with all the other data from the backend. The reactivity I was looking for was some transitions whenever a new comment was added, to allow the new comment to float into position at the top of the list of comments, as the older comments eased out of its way, and the reverse if a comment was deleted. Try as hard as I might, my transitions refused to work.

After about an hour of trying different transitions and animations to make sure the error wasn't with my code, I realized that the problem WAS indeed, my code. I had chosen to use the "partial page reload" feature to refresh the comments, each time a new comment was made, or a comment deleted. While I was able to use "preserve-scroll" to make sure the user barely noticed the page reload, there was indeed a page reload, and so I found the only transitions I could use were entering animations.

Alas a partial page reload is still actually a page reload. Who knew? I am currently torn between keeping the entering transitions I had to resort to, and converting my partial page reloads to axios calls to allow me to manage the comments using local variables and subsequently be able to animate any changes in state as I would like.