Show loading state when checking for MD images

src/coffee/controllers/markdown_image_controller.coffee

@@ -7,6 +7,7 @@ All rights reserved.
 
 _              = require 'underscore'
 BaseController = require './base_controller'
+{Duration}     = require '../constants'
 MarkdownImage  = require '../models/markdown_image'
 
 ########################################################################################################################
@@ -57,10 +58,14 @@ module.exports = class MarkdownImageController extends BaseController
     # BaseController Overrides #####################################################################
 
     onDidRender: ->
-        @$image    = @$('img')
+        @$image          = @$('img')
-        @$fileName = @$('.fileName p')
+        @$fileName       = @$('.fileName p')
-        @$button   = @$('button')
+        @$button         = @$('button')
-        @$input    = @$('input')
+        @$input          = @$('input')
+        @$errorContainer = @$('.error')
+        @$errorMessage   = @$('.error p')
+        @$loaded         = @$('.loaded')
+        @$loading        = @$('.loading')
 
         super
 
@@ -77,6 +82,13 @@ module.exports = class MarkdownImageController extends BaseController
         else
             @$button.html 'Choose'
 
+        if @model.status is MarkdownImage.Status.checking
+            @$loaded.hide duration:Duration.normal
+            @$loading.show duration:Duration.normal, queue:true
+        else
+            @$loading.hide duration:Duration.normal
+            @$loaded.show duration:Duration.normal, queue:true
+
         super
 
     # Backbone.View Overrides ######################################################################

src/jade/templates/markdown_image.jade

@@ -6,7 +6,10 @@
 //-
 
 .view__markdown_image
-    .thumbnail: img
+    .loaded
-    .fileName: p
+        .thumbnail: img
-    button
+        .fileName: p
-    input(type="file", accept="image/gif,image/jpeg,image/png" multiple="false")
+        button
+        input(type="file", accept="image/gif,image/jpeg,image/png" multiple="false")
+    .error: p
+    .loading: p checking for image...

src/scss/templates/markdown_image.scss

@@ -10,6 +10,7 @@ All rights reserved.
 
     display: inline-block;
     margin: 1em 2em 0 0;
+    overflow: hidden;
     vertical-align: top;
 
     .thumbnail {
@@ -29,7 +30,7 @@ All rights reserved.
     .fileName {
         height: 3em;
 
-        margin: 1em 0 6em 11em;
+        margin: 1em 0 7em 11em;
 
         p {
             font-weight: bold;
@@ -41,8 +42,17 @@ All rights reserved.
     }
 
     input {
-        position: absolute;
+        position: absolute; top: -5em;
-        visibility: none;
+    }
-        z-index: -1;
+
+    .loading {
+        height: 10em; width: 33em;
+
+        p {
+            position: absolute; top: 50%; left: 50%;
+            @include transform(translate(-50%, -50%));
+
+            color: $color-gray-light;
+        }
     }
 }