--- a/devtools/client/styleeditor/styleeditor.xul
+++ b/devtools/client/styleeditor/styleeditor.xul
@@ -105,17 +105,16 @@
             <xul:toolbarbutton id="style-editor-options"
                         class="devtools-toolbarbutton devtools-option-toolbarbutton"
                         tooltiptext="&optionsButton.tooltip;"
                         popup="style-editor-options-popup"/>
           </xul:toolbar>
         </xul:box>
         <xul:box id="splitview-resizer-target" class="theme-sidebar splitview-nav-container"
                 persist="height">
-          <div class="devtools-throbber"></div>
           <ol class="splitview-nav" tabindex="0"></ol>
           <div class="splitview-nav placeholder empty">
             <p><strong>&noStyleSheet.label;</strong></p>
             <p>&noStyleSheet-tip-start.label;
               <a href="#"
                 class="style-editor-newButton">&noStyleSheet-tip-action.label;</a>
               &noStyleSheet-tip-end.label;</p>
           </div>

--- a/devtools/client/themes/splitview.css
+++ b/devtools/client/themes/splitview.css
@@ -7,38 +7,41 @@
   --sidemenu-selected-arrow: url(images/item-arrow-dark-ltr.svg);
   --sidemenu-selected-arrow-rtl: url(images/item-arrow-dark-rtl.svg);
 }
 .theme-light {
   --sidemenu-selected-arrow: url(images/item-arrow-ltr.svg);
   --sidemenu-selected-arrow-rtl: url(images/item-arrow-rtl.svg);
 }
 
-.splitview-nav-container .devtools-throbber {
-  display: none;
-  text-align: center;
-}
-
-.loading .splitview-nav-container .devtools-throbber {
-  display: block;
+/* Loading animation */
+@keyframes item-load {
+  0% {
+    transform: scaleY(0) translateY(-100%);
+  }
+  100% {
+    transform: none;
+  }
 }
 
 .splitview-nav {
   list-style: none;
   padding: 0;
   margin: 0;
   background-color: var(--theme-sidebar-background);
 }
 
 .splitview-nav > li {
+  animation: item-load .5s var(--animation-curve);
   padding-inline-end: 8px;
   -moz-box-align: center;
   outline: 0;
   vertical-align: bottom;
   border-bottom: 1px solid rgba(128,128,128,0.15);
+  background: inherit;
 }
 
 .placeholder {
   -moz-box-flex: 1;
   text-align: center;
 }
 
 .splitview-nav > li.splitview-active {

--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -238,16 +238,19 @@
   --toolbarbutton-background: rgba(110,120,130,0.1);
   --toolbarbutton-border-color: transparent;
   --toolbarbutton-hover-background: rgba(110,120,130,0.2);
   --toolbarbutton-hover-border-color: var(--toolbarbutton-border-color);
   --toolbarbutton-checked-background: var(--theme-selection-background);
   --toolbarbutton-checked-color: var(--theme-selection-color);
   --toolbarbutton-checked-border-color: var(--toolbarbutton-border-color);
 
+  /* The photon animation curve */
+  --animation-curve: cubic-bezier(.07,.95,0,1);
+
   /* Firefox Colors CSS Variables v1.0.3
    * Colors are taken from: https://github.com/FirefoxUX/design-tokens */
   --magenta-65: #dd00a9;
 
   --blue-50: #0a84ff;
   --blue-55: #0074e8;
   --blue-60: #0060df;
   --blue-70: #003eaa;