Chunk I want to background

images.jsx

		componentDidMount: function () {
			this.loadItemsFromServer();
			this.loadGalleriesFromServer();
			// I want to background this --v
			stompClient.register([
				{route: '/topic/backend.newItem', callback: this.addItemToUnlinkedList},
				{route: '/topic/backend.deleteItem', callback: this.removeItemFromUnlinkedList},
				{route: '/topic/backend.removeItemFromGallery-item', callback: this.addItemToUnlinkedList},
				{route: '/topic/backend.removeItemFromGallery-gallery', callback: this.updateGallery},
				{route: '/topic/backend.addItemToGallery-item', callback: this.removeItemFromUnlinkedList},
				{route: '/topic/backend.addItemToGallery-gallery', callback: this.updateGallery}
			]);
			// ------------------------------^
		},

@briancavalier I tried wrapping this register block into a promise, but it never was invoked. The idea is, I didn't want all this websocket hand shaking to be on the main thread of execution. I figured wrapping it in a promise would cause it to eventually run, although I don't really understand when promises run.

I'd probably do it like this. when.try defers the execution of stompClient.register and returns promise that will fulfill after stompClient.register returns.

componentDidMount: function() {
  this.loadItemsFromServer();
  this.loadGalleriesFromServer();
  // when.try always invokes the function passed to it in the future
  // If you don't need the returned promise, then no need to assign it to a var
  var registerTopicsDonePromise = when.try(registerTopics, stompClient, [
        {route: '/topic/backend.newItem', callback: this.addItemToUnlinkedList},
        {route: '/topic/backend.deleteItem', callback: this.removeItemFromUnlinkedList},
        {route: '/topic/backend.removeItemFromGallery-item', callback: this.addItemToUnlinkedList},
        {route: '/topic/backend.removeItemFromGallery-gallery', callback: this.updateGallery},
        {route: '/topic/backend.addItemToGallery-item', callback: this.removeItemFromUnlinkedList},
        {route: '/topic/backend.addItemToGallery-gallery', callback: this.updateGallery}
  ]);
},

function registerTopics(stompClient, topics) {
  // What does stompClient.register return?  Is it synchronous?
  return stompClient.register(topics);  
}

Just keep in mind that when.try moves the call to stompClient.register into the future, i.e. componentDidMount will return before stompClient.register is called.

Perfect! That should speed up rendering the UI and let websocket registration roll out when it rolls out.