From 2358bb5408bb5478f71fad7d6efce3479ac6c368 Mon Sep 17 00:00:00 2001
From: Hunter Miller <hunter@tlon.io>
Date: Mon, 27 Sep 2021 19:08:08 -0500
Subject: [PATCH] tile: moving status to predictable area

---
 pkg/grid/src/tiles/Tile.tsx | 45 +++++++++++++++++--------------------
 1 file changed, 21 insertions(+), 24 deletions(-)

diff --git a/pkg/grid/src/tiles/Tile.tsx b/pkg/grid/src/tiles/Tile.tsx
index d8dd06b3d..7338b9d5e 100644
--- a/pkg/grid/src/tiles/Tile.tsx
+++ b/pkg/grid/src/tiles/Tile.tsx
@@ -41,36 +41,33 @@ export const Tile: FunctionComponent<TileProps> = ({ charge, desk }) => {
       onAuxClick={() => addRecentApp(desk)}
     >
       <div>
-        {loading ? (
-          <div className="absolute z-10 top-4 left-4 sm:top-8 sm:left-8 flex items-center justify-center">
-            <Spinner className="h-6 w-6" />
-          </div>
-        ) : (
-          <>
-            {vat?.arak.rail?.paused && (
-              <Bullet className="absolute z-10 top-5 left-5 sm:top-6 sm:left-7 w-4 h-4 text-orange-500 dark:text-black" />
-            )}
-            <TileMenu
-              desk={desk}
-              active={active}
-              menuColor={active ? menuColor : suspendMenuColor}
-              lightText={lightText}
-              className="absolute z-10 top-2.5 right-2.5 sm:top-4 sm:right-4 opacity-0 pointer-coarse:opacity-100 hover-none:opacity-100 focus:opacity-100 group-hover:opacity-100"
-            />
-          </>
+        <div className="absolute z-10 top-4 left-4 sm:top-8 sm:left-8 flex items-center">
+          {!active && (
+            <>
+              {loading && <Spinner className="h-6 w-6 mr-4" />}
+              <span className="text-gray-500">
+                {suspended && 'Suspended'}
+                {loading && 'Installing'}
+                {hung && 'Errored'}
+              </span>
+            </>
+          )}
+        </div>
+        {vat?.arak.rail?.paused && (
+          <Bullet className="absolute z-10 top-5 left-5 sm:top-6 sm:left-7 w-4 h-4 text-orange-500 dark:text-black" />
         )}
+        <TileMenu
+          desk={desk}
+          active={active}
+          menuColor={active ? menuColor : suspendMenuColor}
+          lightText={lightText}
+          className="absolute z-10 top-2.5 right-2.5 sm:top-4 sm:right-4 opacity-0 pointer-coarse:opacity-100 hover-none:opacity-100 focus:opacity-100 group-hover:opacity-100"
+        />
         <div
           className="h4 absolute z-10 bottom-[8%] left-[5%] sm:bottom-7 sm:left-5 py-1 px-3 rounded-lg"
           style={{ backgroundColor }}
         >
           <h3 className="mix-blend-hard-light">{title}</h3>
-          {!active && (
-            <span className={hung ? 'text-orange-500' : 'text-gray-400'}>
-              {suspended && 'Suspended'}
-              {loading && 'Installing'}
-              {hung && 'Errored'}
-            </span>
-          )}
         </div>
         {image && !loading && (
           <img className="absolute top-0 left-0 h-full w-full object-contain" src={image} alt="" />