Fixed screen flicker in content import modal

no refs.

- the "Uploading" step on the content import modal was empty which resulted in a quick flicker during upload.

ghost/admin/app/components/modal-import-content.hbs

@@ -1,10 +1,16 @@
 <div class="gh-content-import-wrapper">
-    {{#if (or (eq this.state 'INIT') (eq this.state 'UPLOADING'))}}
+    {{#if (eq this.state 'INIT')}}
         <header class="modal-header" data-test-modal="import-content">
             <h1>Import content</h1>
         </header>
     {{/if}}
 
+    {{#if (eq this.state 'UPLOADING')}}
+        <header class="modal-header" data-test-modal="import-content">
+            <h1>Uploading</h1>
+        </header>
+    {{/if}}
+
     {{#if (eq this.state 'PROCESSING')}}
         <header class="modal-header icon-center" data-test-modal="import-content">
             {{svg-jar "import-in-progress" class="gh-import-content-icon"}}
@@ -28,6 +34,12 @@
             <ModalImportContent::ContentFileSelect @setFile={{action "setFile"}} />
         {{/if}}
 
+        {{#if (eq this.state 'UPLOADING')}}
+            <div class="gh-import-content-spinner">
+                <GhLoadingSpinner />
+            </div>
+        {{/if}}
+
         {{#if (eq this.state 'PROCESSING')}}
         <div class="gh-content-import-resultcontainer">
             <div class="gh-content-import-result-summary">
@@ -52,11 +64,8 @@
         {{/if}}
 
         {{#if (eq this.state 'UPLOADING')}}
-            <button class="gh-btn disabled" disabled="disabled" data-test-button="restart-import-content" type="button" {{action "reset"}}>
-                <span>Start over</span>
-            </button>
-            <button class="gh-btn gh-btn-green gh-btn-icon disabled" disabled="disabled" type="button" {{action "upload"}}>
-                <span>{{svg-jar "spinner" class="gh-icon-spinner"}} {{this.runningText}}Uploading</span>
+            <button class="gh-btn" data-test-button="close-import-content" type="button" {{on "click" @close}}>
+                <span>Cancel</span>
             </button>
         {{/if}}
 

ghost/admin/app/styles/components/modals-new.css

@@ -207,7 +207,7 @@
     font-size: 2.2rem;
     line-height: 1.15em;
     font-weight: 600;
-    letter-spacing: -0.0035em;
+    letter-spacing: -0.025em;
 }
 
 .modal-header.icon-center {

ghost/admin/app/styles/layouts/labs.css

@@ -513,4 +513,12 @@ p.gh-content-import-errordetail:first-of-type {
 
 .fullscreen-modal-import-content {
     max-width: unset !important;
+}
+
+.gh-import-content-spinner {
+    min-height: 120px;
+}
+
+.gh-import-content-spinner .gh-loading-content {
+    padding-bottom: 0;
 }