Create preview list Dom elements only when needed

spec/app/config-spec.coffee

@@ -151,4 +151,4 @@ describe "Config", ->
       config.loadUserConfig()
       config.set("hair", "blonde") # trigger a save
       expect(console.error).toHaveBeenCalled()
-      expect(config.save).not.toHaveBeenCalled()
+      expect(config.save).not.toHaveBeenCalled()

src/packages/command-panel/lib/preview-list.coffee

@@ -12,12 +12,16 @@ class PreviewList extends ScrollView
 
   operations: null
   viewsForPath: null
+  pixelOverdraw: 100
+  lastRenderedOperationIndex: null
 
   initialize: ->
     super
 
     @on 'core:move-down', => @selectNextOperation(); false
     @on 'core:move-up', => @selectPreviousOperation(); false
+    @on 'scroll', =>
+      @renderOperations() if @scrollBottom() >= (@prop('scrollHeight'))
 
     @command 'command-panel:collapse-all', => @collapseAllPaths()
     @command 'command-panel:expand-all', => @expandAllPaths()
@@ -36,15 +40,21 @@ class PreviewList extends ScrollView
   populate: (operations) ->
     @destroyOperations() if @operations
     @operations = operations
+    @lastRenderedOperationIndex = 0
     @empty()
     @viewsForPath = {}
 
-    for operation in operations
+    @show()
+    @renderOperations()
+    @find('.operation:first').addClass('selected')
+
+  renderOperations: ->
+    startingScrollHeight = @prop('scrollHeight')
+    for operation in @operations[@lastRenderedOperationIndex..]
       pathView = @pathViewForPath(operation.getPath())
       pathView.addOperation(operation)
-
-    @show()
-    @find('.operation:first').addClass('selected')
+      @lastRenderedOperationIndex++
+      break if @prop('scrollHeight') >= startingScrollHeight + @pixelOverdraw and @prop('scrollHeight') > @height() + @pixelOverdraw
 
   pathViewForPath: (path) ->
     pathView = @viewsForPath[path]

src/packages/command-panel/spec/preview-list-spec.coffee

@@ -0,0 +1,34 @@
+RootView = require 'root-view'
+CommandPanelView = require 'command-panel/lib/command-panel-view'
+_ = require 'underscore'
+
+describe "Preview List", ->
+  [previewList, commandPanelMain, commandPanelView] = []
+
+  beforeEach ->
+    window.rootView = new RootView()
+    rootView.attachToDom()
+    commandPanelMain = window.loadPackage('command-panel', activateImmediately: true).mainModule
+    commandPanelView = commandPanelMain.commandPanelView
+    previewList = commandPanelView.previewList
+    rootView.trigger 'command-panel:toggle'
+
+  describe "when the list is scrollable", ->
+    it "adds more operations to the DOM when `scrollBottom` nears the `pixelOverdraw`", ->
+      waitsForPromise ->
+        commandPanelView.execute('X x/so/')
+
+      runs ->
+        expect(previewList.prop('scrollHeight')).toBeGreaterThan previewList.height()
+        previousScrollHeight = previewList.prop('scrollHeight')
+        previousOperationCount = previewList.find("li").length
+
+        previewList.scrollTop(previewList.pixelOverdraw / 2)
+        previewList.trigger('scroll') # Not sure why scroll event isn't being triggered on it's own
+        expect(previewList.prop('scrollHeight')).toBe previousScrollHeight
+        expect(previewList.find("li").length).toBe previousOperationCount
+
+        previewList.scrollToBottom()
+        previewList.trigger('scroll') # Not sure why scroll event isn't being triggered on it's own
+        expect(previewList.prop('scrollHeight')).toBeGreaterThan previousScrollHeight
+        expect(previewList.find("li").length).toBeGreaterThan previousOperationCount