From d70c3fbb3e16bac619175bfcfd4c29a947afb6c0 Mon Sep 17 00:00:00 2001
From: Buck Doyle <buck@hashicorp.com>
Date: Tue, 31 Mar 2020 13:59:43 -0500
Subject: [PATCH] UI: Add exec loading template (#7566)

This closes #7460. Before this, there was an incongruous flash
of the non-exec UI during loading.
---
 ui/app/styles/components/exec.scss |  7 +++++++
 ui/app/templates/exec-loading.hbs  | 17 +++++++++++++++++
 ui/app/templates/exec.hbs          |  2 --
 3 files changed, 24 insertions(+), 2 deletions(-)
 create mode 100644 ui/app/templates/exec-loading.hbs

diff --git a/ui/app/styles/components/exec.scss b/ui/app/styles/components/exec.scss
index a5526f05d..83ba9bcaa 100644
--- a/ui/app/styles/components/exec.scss
+++ b/ui/app/styles/components/exec.scss
@@ -21,6 +21,13 @@
       }
     }
   }
+
+  &.loading {
+    justify-content: center;
+    align-items: center;
+    background: black;
+    height: 100%;
+  }
 }
 
 .task-group-tree {
diff --git a/ui/app/templates/exec-loading.hbs b/ui/app/templates/exec-loading.hbs
new file mode 100644
index 000000000..9d3d0db9f
--- /dev/null
+++ b/ui/app/templates/exec-loading.hbs
@@ -0,0 +1,17 @@
+{{title "Exec"}}
+<nav class="navbar is-popup">
+  <div class="navbar-brand">
+    <div class="navbar-item is-logo">
+      {{partial "partials/nomad-logo"}}
+    </div>
+  </div>
+
+  <div class="navbar-end">
+    <a href="https://nomadproject.io/docs" target="_blank" rel="noopener" class="navbar-item">Documentation</a>
+    {{x-icon "lock-closed"}}
+  </div>
+</nav>
+
+<div class="tree-and-terminal loading">
+  {{partial "partials/loading-spinner"}}
+</div>
\ No newline at end of file
diff --git a/ui/app/templates/exec.hbs b/ui/app/templates/exec.hbs
index 9e5ade080..d08a9493c 100644
--- a/ui/app/templates/exec.hbs
+++ b/ui/app/templates/exec.hbs
@@ -1,6 +1,4 @@
 {{title "Exec"}}
-{{!-- the application shows briefly in the background, shouldn’t render at all 😳 --}}
-{{!-- issue to fix: https://github.com/hashicorp/nomad/issues/7460 --}}
 <nav class="navbar is-popup">
   <div class="navbar-brand">
     <div class="navbar-item is-logo">