document load time: CC Libraries optimization

shaoshing commented 8 years ago

This PR includes the following optimizations on CC Libraries to improve performance.

Defer CC Libraries loading/rendering process to improve startup performance. Before, CC Libraries is loaded in the beforeStartup callback, which slows down the startup process and triggers libraries panel rendering, which slow down the startup further. This process can be deferred as the chance of using the librarise panel right after startup is small.
Prevent the Libraries panel DOM from removing when closing the last document. Otherwise, we have to waste time in rendering the panel again when creating a new document.
Pre-render the Libraries panel in no-doc state. While in no-doc state, the libraries panel can be pre-rendered (by React) when the data is ready.

Below is the result of the before/after test in various scenarios:

	Before	After	Diff
no-doc startup	869ms	758ms	-111ms
empty doc startup	1741ms	828ms	-903ms
vermillion startup	2562ms	1640ms	-922ms
no-doc -> empty doc (scripting)	691ms	252ms	-439ms
no-doc -> empty doc (rendering)	71ms	54ms	-17ms
empty doc -> no-doc (scripting)	208ms	208ms	0
empty doc -> no-doc (rendering)	5ms	9ms	4ms

(selected library: Samples Collection April 23 2015)

chadrolfs commented 8 years ago

:moneybag:

iwehrman commented 8 years ago

One concern with this is that the rest of the panel contents fade in when they're ready, but the Libraries panel now does not, and it feels just a little off. Can you do some experiments to try to improve this? Like, try fading in the libraries panel content when it's ready?

iwehrman commented 8 years ago

Or, alternatively, rendering a spinner when first showing the UI and replacing that spinner with the contents when ready?

shaoshing commented 8 years ago

Good idea. I will experiment with the spinner loader if content is not ready

iwehrman commented 8 years ago

Sorry, I started reading through this and then got distracted, but besides my one gripe I think this looks great. I'm ready to merge if we can improve the loading experience just a little bit.

shaoshing commented 8 years ago

@iwehrman I experimented and compared the fade-in and spinner solutions, and I think face-in has better user experience in this case. The libraries panel usually can finish loading and rendering within within 500ms (even for large collection, like Samples Collection April 23 2015, the time is still within 1200ms range). In such short amount of time, the spinner seems to be distracting. Also, it makes me feel that the panel is slower, compare to fading-in the content when ready. The reason might be because moving object can attract attension easier.

I've push my changes with the fade-in solution, please try it out and let me know what you feel.

iwehrman commented 8 years ago

I'm not surprised that the spinner was distracting, but I'm glad you tried both options. I think the current behavior is great. I'm ready to merge except for that one additional typo. :+1: :+1:

shaoshing commented 8 years ago

@iwehrman I just addressed the typo. Please review again.

iwehrman commented 8 years ago

LGTM!

shaoshing commented 8 years ago

Thanks for merging!

adobe-photoshop / spaces-design

document load time: CC Libraries optimization #3661