diff --git a/src/index.html b/src/index.html
index d399a0f..4e132cd 100644
--- a/src/index.html
+++ b/src/index.html
@@ -128,7 +128,7 @@ <h1>Try Yarn Spinner</h1>
               style="max-height: 25%; overflow-y: scroll"
             >
               <div class="col-12">
-                <div id="variables">
+                <div id="variables" class="d-none">
                   <table class="table table-borderless">
                     <thead>
                       <th>Variable</th>
diff --git a/src/playground.ts b/src/playground.ts
index 50f18a6..a950367 100644
--- a/src/playground.ts
+++ b/src/playground.ts
@@ -648,9 +648,10 @@ function updateVariableStorageDisplay(storage: yarnspinner.IVariableStorage) {
   let variableTable = document.getElementById("variables");
 
   // Make the variables view visible now
-  variableTable.classList.remove("d-none");
   let variableTableBody = document.getElementById("variables-body");
 
+  let anyVariablesVisible = false;
+
   // Remove all entries from the variables list
   while (variableTableBody.firstChild) {
     variableTableBody.removeChild(variableTableBody.firstChild);
@@ -662,6 +663,8 @@ function updateVariableStorageDisplay(storage: yarnspinner.IVariableStorage) {
       continue;
     }
 
+    anyVariablesVisible = true;
+
     let variable = storage.getValue(variableName);
 
     let row = document.createElement("tr");
@@ -680,4 +683,8 @@ function updateVariableStorageDisplay(storage: yarnspinner.IVariableStorage) {
       variableValueCol.innerText = variable.toString();
     }
   }
+
+  if (anyVariablesVisible) {
+    variableTable.classList.remove("d-none");
+  }
 }