5a768ac3e29375e54bb9b05121e21f1d26ee87fe
chmalee
  Fri Sep 2 13:06:54 2022 -0700
Add a loading icon on hgGateway when a species is searched or a position is searched, refs #29765

diff --git src/hg/hgGateway/hgGateway.html src/hg/hgGateway/hgGateway.html
index e33e181..66609d1 100644
--- src/hg/hgGateway/hgGateway.html
+++ src/hg/hgGateway/hgGateway.html
@@ -1,260 +1,260 @@
     <!-- For determining width of scrollbar (if there is one) -->
     <div id="sbTestContainer">
       <div id="sbTestContainerDPlain"></div>
       <div id="sbTestContainerDScroll" style="overflow: scroll;">
         <div id="sbTestContainerDInsideScroll"></div>
       </div>
     </div>
 
     <div id="pageContent">
 
       <div id="selectSpeciesSection" class="jwColumn" style="width: 450px;">
         <div class="jwSectionTitle">
           Browse/Select Species
         </div>
         <div class="jwSectionContents">
 
           <div id="popSpeciesTitle" class="jwSubsectionTitle">
             Popular Species
           </div>
           <div class="jwSubsectionContents">
             <div class="jwIconWrapper">
               <div class="jwIconSprite jwIconSpriteHuman"></div>
               <div class="jwIconSpriteLabel">Human</div>
             </div>
             <div class="jwIconWrapper">
               <div class="jwIconSprite jwIconSpriteMouse"></div>
               <div class="jwIconSpriteLabel">Mouse</div>
             </div>
             <div class="jwIconWrapper">
               <div class="jwIconSprite jwIconSpriteRat"></div>
               <div class="jwIconSpriteLabel">Rat</div>
             </div>
             <div class="jwIconWrapper">
               <div class="jwIconSprite jwIconSpriteZebrafish"></div>
               <div class="jwIconSpriteLabel">Zebrafish</div>
             </div>
             <div class="jwIconWrapper">
               <div class="jwIconSprite jwIconSpriteFly"></div>
               <div class="jwIconSpriteLabel">Fruitfly</div>
             </div>
             <div class="jwIconWrapper">
               <div class="jwIconSprite jwIconSpriteWorm"></div>
               <div class="jwIconSpriteLabel">Worm</div>
             </div>
             <div class="jwIconWrapper">
               <div class="jwIconSprite jwIconSpriteYeast"></div>
               <div class="jwIconSpriteLabel">Yeast</div>
             </div>
             <br>Search through thousands of genome browsers
             <div>
-              <input id="speciesSearch" value="" size=48>
+              <input id="speciesSearch" value="" size=42>
             </div>
           <br><a target="_blank" href="/FAQ/FAQreleases.html#release13">Unable to find a genome? Send us a request.</a>
           </div>
 
           <!-- This subsection is hidden unless hgGateway.js has a tree to draw. -->
           <div id="representedSpeciesTitle" class="jwSubsectionTitle" style="display: none;">
             UCSC species tree and connected assembly hubs
           </div>
           <div id="speciesGraphic" class="jwSubsectionContents" style="display: none;">
             <div id="sliderWidgetContainer" class="jwSliderWidget">
               <div id="sliderSvgContainer" class="jwSliderIcon">
                 <svg id="sliderSvg"
                      xmlns:svg="http://www.w3.org/2000/svg"
                      xmlns="http://www.w3.org/2000/svg"
                      version="1.1"
                      height="53"
                      width="30">
                   <rect id="sliderRectangle"
                         ry="3"
                         y="1.5"
                         x="1.5"
                         height="50"
                         width="24"
                         style="fill: none; stroke: #222222; stroke-width: 3;"></rect>
                   <path id="sliderTriangle"
                         d="m 2.5,24 0,6 4,-3 z"
                         style="fill: #222222; stroke: #222222; stroke-width: 3"></path>
                 </svg>
               </div> <!-- sliderSvgContainer -->
               <div class="jwRainbowSlider" id="rainbowSlider">
                 <!-- JS will populate this -->
               </div>
             </div>
             <div class="jwSpeciesPicker" id="speciesPicker">
               <div id="speciesTreeContainer" class="jwColumn" style="overflow: visible;">
                 <svg id="speciesTree"
                      xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink">
                   <defs>
                     <!-- The y coordinates of these will be overwritten by JS. -->
                     <!-- I tried creating them in JS, but then the image style
                          url('#clipWhatever') didn't work. -->
                     <clipPath id="clipHuman">
                       <rect x="2" y="0" width="65" height="65"></rect>
                     </clipPath>
                     <clipPath id="clipMouse">
                       <rect x="2" y="0" width="65" height="65"></rect>
                     </clipPath>
                     <clipPath id="clipFly">
                       <rect x="2" y="0" width="65" height="65"></rect>
                     </clipPath>
                     <clipPath id="clipWorm">
                       <rect x="2" y="0" width="65" height="65"></rect>
                     </clipPath>
                     <clipPath id="clipYeast">
                       <rect x="2" y="0" width="65" height="65"></rect>
                     </clipPath>
                     <clipPath id="clipMonkey">
                       <rect x="2" y="0" width="65" height="65"></rect>
                     </clipPath>
                     <clipPath id="clipHedgehog">
                       <rect x="2" y="0" width="65" height="65"></rect>
                     </clipPath>
                     <clipPath id="clipPig">
                       <rect x="2" y="0" width="65" height="65"></rect>
                     </clipPath>
                     <clipPath id="clipCow">
                       <rect x="2" y="0" width="65" height="65"></rect>
                     </clipPath>
                     <clipPath id="clipOrca">
                       <rect x="2" y="0" width="65" height="65"></rect>
                     </clipPath>
                     <clipPath id="clipHorse">
                       <rect x="2" y="0" width="65" height="65"></rect>
                     </clipPath>
                     <clipPath id="clipDog">
                       <rect x="2" y="0" width="65" height="65"></rect>
                     </clipPath>
                     <clipPath id="clipWalrus">
                       <rect x="2" y="0" width="65" height="65"></rect>
                     </clipPath>
                     <clipPath id="clipBat">
                       <rect x="2" y="0" width="65" height="65"></rect>
                     </clipPath>
                     <clipPath id="clipElephant">
                       <rect x="2" y="0" width="65" height="65"></rect>
                     </clipPath>
                     <clipPath id="clipManatee">
                       <rect x="2" y="0" width="65" height="65"></rect>
                     </clipPath>
                     <clipPath id="clipArmadillo">
                       <rect x="2" y="0" width="65" height="65"></rect>
                     </clipPath>
                     <clipPath id="clipKangaroo">
                       <rect x="2" y="0" width="65" height="65"></rect>
                     </clipPath>
                     <clipPath id="clipBird">
                       <rect x="2" y="0" width="65" height="65"></rect>
                     </clipPath>
                     <clipPath id="clipLizard">
                       <rect x="2" y="0" width="65" height="65"></rect>
                     </clipPath>
                     <clipPath id="clipFrog">
                       <rect x="2" y="0" width="65" height="65"></rect>
                     </clipPath>
                     <clipPath id="clipFish">
                       <rect x="2" y="0" width="65" height="65"></rect>
                     </clipPath>
                     <clipPath id="clipEbola">
                       <rect x="2" y="0" width="65" height="65"></rect>
                     </clipPath>
                   </defs>
                   <style>
                   text {
                       stroke:none;
                       fill: black;
                       font-size: 12px;
                       text-anchor: end;
                       letter-spacing: 0.025em;
                       cursor: pointer;
                   }
                   text:hover, text.selected {
                       fill: #31469A; /* rainbow dark blue: */
                       font-weight: bold;
                   }
                   text.trackHubsLink {
                       text-anchor: start;
                   }
                   line {
                       stroke: #4b759d;
                       stroke-width: 1;
                   }
                   line:hover {
                       stroke-width: 2;
                   }
                   </style>
 
                   <!-- Tree inserted here by JS -->
 
                 </svg>
               </div> <!-- speciesTreeContainer -->
             </div> <!-- speciesPicker -->
 
           </div> <!-- subsection contents -->
 
         </div>
       </div>
 
       <div id="findPositionSection" class ="jwColumn">
         <div id="findPositionTitle" class="jwSectionTitle">
           Find Position
         </div>
         <div id="findPositionContents" class="jwSectionContents"
              style="display: none;"> <!-- To avoid empty containers jumping around, hide first. -->
 
           <div id="findPosInputContainer" style="display: inline-block;">
             <div id="selectAssemblyLabel" class="jwInputLabel">Assembly</div>
             <select id="selectAssembly">
             </select>
 
             <div class="vertSpacerAbovePosition"></div>
 
             <div class="jwInputLabel">
               Position/Search Term
             </div>
             <input id="positionInput" value="" size="40">
             <div class="jwCurrentPos">
               Current position:
               <span id="positionDisplay" class="jwPosDisplay"></span>
               <i id="copyPosition" class="fa fa-copy jwTextBlue"
                  title="Copy the current position into the input above"></i>
             </div>
           </div>
 
           <div class="jwGoButtonContainer"
                title="Go to the Genome Browser">
             <div class="jwGoButton">
               GO
             </div>
             <i class="jwGoIcon fa fa-play fa-2x"></i>
           </div>
 
           <div id="surveyContainer" class="jwSurveyContainer"></div>
 
           <div class="vertSpacerBelowPosition jwClearBoth"></div>
 
           <div id="descriptionTitle" class="jwDescriptionTitle">
             <div class="jwFloatLeft">
               <b><span id="descriptionGenome"></span> Genome Browser</b> -
               <span id="descriptionDb"></span> assembly
             </div>
             <div class="jwFloatRight" style="margin-left: 5px;">
               <a id="chromInfoLink" class="jwAnchor" href="hgTracks?chromInfoPage=&hgsid=$hgsid">
                 <div class="jwWhiteButton">
                   view sequences
                 </div>
               </a>
             </div>
             <div class="jwClearBoth"></div>
           </div>
           <div id="descriptionText" class="jwDescriptionText">
           </div>
 
         </div>
       </div>
 
     </div>
 
     <div style="clear: both;"></div>