Add progress bar to loading sesion view

src/packages/collaboration/lib/bootstrap.coffee

@@ -5,15 +5,31 @@ $ = require 'jquery'
 {$$} = require 'space-pen'
 GuestSession = require './guest-session'
 
-window.setDimensions(width: 350, height: 100)
+window.setDimensions(width: 350, height: 125)
 window.setUpEnvironment('editor')
 {sessionId} = atom.getLoadSettings()
 
 loadingView = $$ ->
-  @div style: 'margin: 10px; text-align: center', =>
-    @div "Joining session #{sessionId}"
+  @div style: 'margin: 10px', =>
+    @h4 style: 'text-align: center', 'Joining Session'
+    @div class: 'progress progress-striped active', style: 'margin-bottom: 10px', =>
+      @div class: 'progress-bar', style: 'width: 0%'
+    @div class: 'progress-bar-message', 'Establishing connection\u2026'
 $(window.rootViewParentSelector).append(loadingView)
 atom.show()
 
-atom.guestSession = new GuestSession(sessionId)
-atom.guestSession.on 'started', -> loadingView.remove()
+updateProgressBar = (message, percentDone) ->
+  loadingView.find('.progress-bar-message').text("#{message}\u2026")
+  loadingView.find('.progress-bar').css('width', "#{percentDone}%")
+
+guestSession = new GuestSession(sessionId)
+guestSession.on 'started', -> loadingView.remove()
+guestSession.on 'connection-opened', -> updateProgressBar('Downloading session data', 25)
+guestSession.on 'document-received', -> updateProgressBar('Synchronize repository', 50)
+operationsDone = -1
+guestSession.on 'mirror-progress', (message, command, operationCount) ->
+  operationsDone++
+  percentDone = Math.round((operationsDone / operationCount) * 50) + 50
+  updateProgressBar(message, percentDone)
+
+atom.guestSession = guestSession

src/packages/collaboration/lib/guest-session.coffee

@@ -21,7 +21,9 @@ class GuestSession
     connection = @peer.connect(sessionId, {reliable: true, connectionId: @getId()})
     connection.on 'open', =>
       console.log 'connection opened'
+      @trigger 'connection-opened'
       connection.once 'data', (data) =>
+        @trigger 'connection-document-received'
         console.log 'received document', data
         doc = telepath.Document.deserialize(data.doc, site: telepath.createSite(@getId()))
         atom.windowState = doc.get('windowState')
@@ -38,7 +40,9 @@ class GuestSession
     repoName = repoName.replace(/\.git$/, '')
     repoPath = path.join(remote.require('app').getHomeDir(), 'github', repoName)
 
-    patrick.mirror repoPath, repoSnapshot, (error) =>
+    progressCallback = (args...) => @trigger 'mirror-progress', args...
+
+    patrick.mirror repoPath, repoSnapshot, {progressCallback}, (error) =>
       if error?
         console.error(error)
       else
@@ -46,7 +50,6 @@ class GuestSession
 
         atom.getLoadSettings().initialPath = repoPath
         window.startEditorWindow()
-
         @participants.push
           id: @getId()
           email: git.getConfigValue('user.email')

src/packages/collaboration/stylesheets/collaboration.less

@@ -10,6 +10,8 @@
 
   .share {
     .mini-icon(notifications);
+    position: relative;
+    right: -1px;
     margin-bottom: 5px;
   }