Change:
<!-- Do Not Delete This! bugreporttemplate --<!-- Please read our Rules of Conduct: --<!-- Read our guide about submitting issues: --<!-- Search existing issues to avoid creating duplicates. --<!-- Test using the latest Insiders build to see if your issue has already been fixed: --<!-- Instead of creating your report here, use 'Report Issue' from the 'Help' menu in VS Code to pre-fill useful information. --<!-- Launch with to check. --Does this issue occur when all extensions are disabled?: Yes/No Yes <!-- If you answered No above, use 'Help: Start Extension Bisect' from Command Palette to try to identify the cause. --<!-- Issues caused by an extension need to be reported directly to the extension publisher. The 'Help Report Issue' dialog can assist with this. --- VS Code Version: OS Version: CPUs | Apple M1 (8 x 24) -- | -- GPU Status | 2dcanvas: enabled canvasooprasterization: disabledoff directrenderingdisplaycompositor: disabledoffok gpucompositing: enabled metal: disabledoff multiplerasterthreads: enabledon opengl: enabledon rasterization: enabled rawdraw: disabledoffok skiarenderer: enabledon videodecode: enabled videoencode: enabled webgl: enabled webgl2: enabled Load (avg) | 2, 2, 2 Memory (System) | 16.00GB (0.08GB free) Screen Reader | no VM | 0% Steps to Reproduce: in extensions the scroll gutter https://user-
Using the list widget underneath, hence assigning to
This happens because the list is paged and is loading each element from the network. Want to provide a better loading animation here?
Can we do something simple and use the loading icon animation? https://user-
What do you think
This is much better! Thank you for looking into this

Discussion:
background: url('loading.svg') center center no-repeat; } <ins> .monaco-workbench.vs-dark .extensions-viewlet > .extensions .extension-list-item.loading { background-image: url('loading-dark.svg'); } .monaco-workbench.hc-black .extensions-viewlet > .extensions .extension-list-item.loading { background-image: url('loading-hc.svg'); } </ins> .extensions-viewlet > .extensions .extension-list-item.loading > .icon-container { display: none; }

<ins> <?xml version='1.0' standalone='no' ?> <svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='10px' height='10px'> <style> circle { animation: ball 0.6s linear infinite; } circle:nth-child(2) { animation-delay: 0.075s; } circle:nth-child(3) { animation-delay: 0.15s; } circle:nth-child(4) { animation-delay: 0.225s; } circle:nth-child(5) { animation-delay: 0.3s; } circle:nth-child(6) { animation-delay: 0.375s; } circle:nth-child(7) { animation-delay: 0.45s; } circle:nth-child(8) { animation-delay: 0.525s; } @keyframes ball { from { opacity: 1; } to { opacity: 0.3; } } </style> <g style="fill:grey;"> <circle cx='5' cy='1' r='1' style='opacity:0.3;' /> <circle cx='7.8284' cy='2.1716' r='1' style='opacity:0.3;' /> <circle cx='9' cy='5' r='1' style='opacity:0.3;' /> <circle cx='7.8284' cy='7.8284' r='1' style='opacity:0.3;' /> <circle cx='5' cy='9' r='1' style='opacity:0.3;' /> <circle cx='2.1716' cy='7.8284' r='1' style='opacity:0.3;' /> <circle cx='1' cy='5' r='1' style='opacity:0.3;' /> <circle cx='2.1716' cy='2.1716' r='1' style='opacity:0.3;' /> </g> </svg> </ins>

<ins> <?xml version='1.0' standalone='no' ?> <svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='10px' height='10px'> <style> circle { animation: ball 0.6s linear infinite; } circle:nth-child(2) { animation-delay: 0.075s; } circle:nth-child(3) { animation-delay: 0.15s; } circle:nth-child(4) { animation-delay: 0.225s; } circle:nth-child(5) { animation-delay: 0.3s; } circle:nth-child(6) { animation-delay: 0.375s; } circle:nth-child(7) { animation-delay: 0.45s; } circle:nth-child(8) { animation-delay: 0.525s; } @keyframes ball { from { opacity: 1; } to { opacity: 0.3; } } </style> <g style="fill:white;"> <circle cx='5' cy='1' r='1' style='opacity:0.3;' /> <circle cx='7.8284' cy='2.1716' r='1' style='opacity:0.3;' /> <circle cx='9' cy='5' r='1' style='opacity:0.3;' /> <circle cx='7.8284' cy='7.8284' r='1' style='opacity:0.3;' /> <circle cx='5' cy='9' r='1' style='opacity:0.3;' /> <circle cx='2.1716' cy='7.8284' r='1' style='opacity:0.3;' /> <circle cx='1' cy='5' r='1' style='opacity:0.3;' /> <circle cx='2.1716' cy='2.1716' r='1' style='opacity:0.3;' /> </g> </svg> </ins>

<del> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="575" height="6px"> <style> </del> <ins> <?xml version='1.0' standalone='no' ?> <svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='10px' height='10px'> <style> </ins> circle { <del> animation: ball 2.5s cubic-bezier(0.000, 1.000, 1.000, 0.000) infinite; fill: #bbb; </del> <ins> animation: ball 0.6s linear infinite; </ins> } <del> #balls { animation: balls 2.5s linear infinite; } #circle2 { animation-delay: 0.1s; } #circle3 { animation-delay: 0.2s; } #circle4 { animation-delay: 0.3s; } #circle5 { animation-delay: 0.4s; } </del> <ins> circle:nth-child(2) { animation-delay: 0.075s; } circle:nth-child(3) { animation-delay: 0.15s; } circle:nth-child(4) { animation-delay: 0.225s; } circle:nth-child(5) { animation-delay: 0.3s; } circle:nth-child(6) { animation-delay: 0.375s; } circle:nth-child(7) { animation-delay: 0.45s; } circle:nth-child(8) { animation-delay: 0.525s; } </ins> @keyframes ball { <del> from { transform: none; } 20% { transform: none; } 80% { transform: translateX(864px); } to { transform: translateX(864px); } } @keyframes balls { from { transform: translateX(-40px); } to { transform: translateX(30px); } </del> <ins> from { opacity: 1; } to { opacity: 0.3; } </ins> } <del> </style> <g id="balls"> <circle class="circle" id="circle1" cx="-115" cy="3" r="3"/> <circle class="circle" id="circle2" cx="-130" cy="3" r="3" /> <circle class="circle" id="circle3" cx="-145" cy="3" r="3" /> <circle class="circle" id="circle4" cx="-160" cy="3" r="3" /> <circle class="circle" id="circle5" cx="-175" cy="3" r="3" /> </g> </svg> </del>  No newline at end of file <ins> </style> <g> <circle cx='5' cy='1' r='1' style='opacity:0.3;' /> <circle cx='7.8284' cy='2.1716' r='1' style='opacity:0.3;' /> <circle cx='9' cy='5' r='1' style='opacity:0.3;' /> <circle cx='7.8284' cy='7.8284' r='1' style='opacity:0.3;' /> <circle cx='5' cy='9' r='1' style='opacity:0.3;' /> <circle cx='2.1716' cy='7.8284' r='1' style='opacity:0.3;' /> <circle cx='1' cy='5' r='1' style='opacity:0.3;' /> <circle cx='2.1716' cy='2.1716' r='1' style='opacity:0.3;' /> </g> </svg> </ins>