Hi Community,
I’m Lingyang Zhu, a frontend engineer on the Confluence Cloud team. While our engineering teams are working to improve performance and make Confluence technically fast, I’m excited to share some new enhancements that will make the Confluence editor feel faster and perform better.
Have you ever experienced the following scenarios?
When loading the editor starts, it takes forever for different elements in the page to load.
Editor layout changes while loading. The layout shifts right before you click an element and you end up clicking something else (or nothing at all…).
We set out to improve this experience by making the loading experience smooth and stable while keeping you engaged while transitioning to the editor.
BEFORE
AFTER
When you create a new page or edit a page, the loading experience should feel fluid. We set out to reassure you that Confluence is actively working with instant UI feedback on more interactions.
Loading Overlay
BEFORE
AFTER
You may have seen a long, frustrating white screen when transitioning between view page and edit before you could actually see the editor. Maybe you were left wondering if the page was even loading?
Now when you click edit, you will see a transparent loading screen and then the editor will show up with the elements ready to be updated.
Previously, you had to wait for the page to load by staring at the current view before suddenly jumping to a whole new view of content as components loaded one-by-one. We set out to make the transition faster by added entering motions, so that context changes would feel responsive and natural instead of lagging, janky, and jumpy.
Progress bar to help you gauge waiting time
BEFORE
AFTER
Before, you would have no idea how long it would take for a page to load, making it feel extra slow.
We added a progress bar below the editor toolbar to show the page loading as it progresses.
Breadcrumb truncation to reduce layout jumps
BEFORE
AFTER
Breadcrumbs were different lengths in the editor versus view page, causing content to shift as it was loaded.
We truncated breadcrumbs so that they are consistent. Now you will see the parent page title and the space name.
If you want to view the full breadcrumbs, click the … to expand. If you hover over any of the titles, you will see the complete page title in a tooltip.
Repositioning avatar and find and replace to reduce shifting components
BEFORE
AFTER
You may have noticed that the find / replace button 🔎 would load first followed by the avatars, causing the avatars to jump to the left in the toolbar.
We swapped the location of the find and replace button with the avatars to make sure they don’t jump in the toolbar as it loads.
These enhancements are still rolling out so if you don’t see it on your Confluence Cloud instance today, it should come to your site soon. The entire Confluence team is focused on improving performance and reliability for you so there is more to come. Please leave any feedback below in the comments and stay tuned for more features and enhancements coming soon!
Lingyang Zhu
5 comments