Place spinner inside of markdown body

src/packages/markdown-preview/src/markdown-preview.coffee

@@ -1,6 +1,7 @@
 ScrollView = require 'scroll-view'
 fs = require 'fs'
 $ = require 'jquery'
+{$$$} = require 'space-pen'
 
 module.exports =
 class MarkdownPreview extends ScrollView
@@ -11,7 +12,6 @@ class MarkdownPreview extends ScrollView
   @content: (rootView) ->
     @div class: 'markdown-preview', tabindex: -1, =>
       @div class: 'markdown-body', outlet: 'markdownBody'
-      @div class: 'markdown-spinner', outlet: 'markdownSpinner'
 
   initialize: (@rootView) ->
     super
@@ -27,8 +27,7 @@ class MarkdownPreview extends ScrollView
   attach: ->
     return unless @isMarkdownFile(@getActivePath())
     @rootView.append(this)
-    @markdownBody.hide()
-    @markdownSpinner.show()
+    @markdownBody.html(@getLoadingHtml())
     @loadHtml()
     @focus()
 
@@ -49,6 +48,10 @@ class MarkdownPreview extends ScrollView
      <li>You aren\'t online or are unable to reach <a href="https://github.com">github.com</a></li>
      </ul>'
 
+   getLoadingHtml: ->
+     $$$ ->
+       @div class: 'markdown-spinner', 'Loading Markdown...'
+
   loadHtml: (text) ->
     payload =
        mode: 'markdown'
@@ -64,10 +67,7 @@ class MarkdownPreview extends ScrollView
     $.ajax(request)
 
   setHtml: (html) ->
-    return unless @hasParent()
-    @markdownBody.html(html)
-    @markdownSpinner.hide()
-    @markdownBody.show()
+    @markdownBody.html(html) if @hasParent()
 
   isMarkdownFile: (path) ->
     fs.isMarkdownExtension(fs.extension(path))

static/markdown-preview.css

@@ -30,14 +30,13 @@
 }
 
 .markdown-spinner {
-  position:absolute;
-  top: 50%;
-  left: 50%;
-  width: 128px;
-  height: 128px;
-  margin-left: -64px;
-  margin-top: -64px;
+  margin: auto;
   background-image: url(images/octocat-spinner-128.gif);
+  background-repeat: no-repeat;
+  background-size: 64px;
+  background-position: top center;
+  padding-top: 70px;
+  text-align: center;
 }