Add placeholder and loading graphics

visualizer/static/style.css

@@ -213,12 +213,15 @@ select:disabled {
 #plot img {
   aspect-ratio: 1200 / 600;
   background: white;
+  background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzODQgMTkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogPHJlY3QgeD0iMzIiIHk9IjE2IiB3aWR0aD0iMzIwIiBoZWlnaHQ9IjE2MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjgiLz4KIDxnIGZpbGw9IiNlMGUwZTAiPgogIDxjaXJjbGUgY3g9IjE1MiIgY3k9Ijk2IiByPSI4Ii8+CiAgPGNpcmNsZSBjeD0iMTkyIiBjeT0iOTYiIHI9IjgiLz4KICA8Y2lyY2xlIGN4PSIyMzIiIGN5PSI5NiIgcj0iOCIvPgogPC9nPgo8L3N2Zz4K');
+  background-repeat: no-repeat;
+  background-size: contain;
   max-width: 100%;
   width: 1200px;
 }
 
 #visualization.placeholder #plot img {
-  background: #eeeeee;
+  background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzODQgMTkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogPGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIiBzdHJva2Utd2lkdGg9IjgiPgogIDxyZWN0IHg9IjMyIiB5PSIxNiIgd2lkdGg9IjMyMCIgaGVpZ2h0PSIxNjAiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJtMTIwIDEzMiA0OC00OCA0OCAyNCA0OC00OCIvPgogIDxnIGZpbGw9IndoaXRlIj4KICAgPGNpcmNsZSBjeD0iMTIwIiBjeT0iMTMyIiByPSIxMiIvPgogICA8Y2lyY2xlIGN4PSIxNjgiIGN5PSI4NCIgcj0iMTIiLz4KICAgPGNpcmNsZSBjeD0iMjE2IiBjeT0iMTA4IiByPSIxMiIvPgogICA8Y2lyY2xlIGN4PSIyNjQiIGN5PSI2MCIgcj0iMTIiLz4KICA8L2c+CiA8L2c+Cjwvc3ZnPgo=');
 }
 
 #sources {