[Frontend] Markup and CSS for loading tree items

#445
New wait-spinner constants;
Markup fixed in wait-node.html;
Styles for .loading when applied to
.tree-item.wait-node;
Changed from percent-of-parent-
width sizing of spinner to fixed size;

platform/commonUI/general/res/sass/_constants.scss

@@ -98,6 +98,9 @@ $bubbleMaxW: 300px;
 $reqSymbolW: 15px;
 $reqSymbolM: $interiorMargin * 2;
 $reqSymbolFontSize: 0.7em;
+// Wait Spinner Defaults
+$waitSpinnerD: 32px;
+$waitSpinnerBorderW: 5px;
 
 /************************** CONTROLS */
 $controlDisabledOpacity: 0.3;

platform/commonUI/general/res/sass/helpers/_wait-spinner.scss

@@ -46,10 +46,7 @@
 }
 
 .wait-spinner {
-	$d: 5%;
+	@include spinner($waitSpinnerBorderW, $colorKey);
-	@include spinner(0.5em, $colorKey);
-	height: auto; width: auto;
-	padding: $d; // Will size object based on parent container WIDTH
 	pointer-events: none;
 	z-index: 2;
 	&.inline {
@@ -60,15 +57,6 @@
 	}
 }
 
-.treeview .wait-spinner {
-    // Only used in subtree.html, which I don't think this is actually being used
-	$d: 10px;
-	height: $d; width: $d;
-	margin: 0 !important;
-	padding: 0 !important;
-	top: 2px; left: 0;
-}
-
 .loading {
 	// Can be applied to any block element with height and width
     pointer-events: none;
@@ -77,8 +65,8 @@
         content: '';
     }
 	&:before {
-        @include spinner(5px, $colorLoadingFg);
+        @include spinner($waitSpinnerBorderW, $colorLoadingFg);
-        padding: 5%;
+        height: $waitSpinnerD; width: $waitSpinnerD;
         z-index: 10;
 	}
     &:after {
@@ -87,8 +75,19 @@
         display: block;
         z-index: 9;
     }
-    &.tree-item:before {
+    &.tree-item.t-wait-node {
-        padding: $menuLineH / 4;
+        $d: $treeTypeIconW;
-        border-width: 2px;
+        $spinnerL: $treeVCW + $interiorMargin + 3px + $d/2;
+        font-style: italic;
+        padding-left: $spinnerL + $d/2 + $interiorMargin;
+        &:before {
+            height: $d;
+            width: $d;
+            border-width: 3px;
+            left: $spinnerL;
+        }
+        &:after {
+            display: none;
+        }
     }
 }

platform/commonUI/general/res/templates/tree/wait-node.html

@@ -19,9 +19,4 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<li>
+<li class='tree-item t-wait-node loading'>Loading...</li>
-    <span class="tree-item">
-        <span class="icon wait-spinner"></span>
-        <span class="title-label">Loading...</span>
-    </span>
-</li>