Queue a refresh when registering a decoration

Part of microsoft/vscode#143798

demo/client.ts

@@ -530,7 +530,6 @@ function loadTest() {
 function addDecoration() {
   const marker = term.addMarker(1);
   const decoration = term.registerDecoration({ marker });
-  term.write('');
   decoration.onRender(() => {
     decoration.element.style.backgroundColor = 'red';
   });

src/browser/services/DecorationService.ts

@@ -15,6 +15,7 @@ export class DecorationService extends Disposable implements IDecorationService
   private _container: HTMLElement | undefined;
   private _screenElement: HTMLElement | undefined;
   private _renderService: IRenderService | undefined;
+  private _animationFrame: number | undefined;
 
   constructor(@IInstantiationService private readonly _instantiationService: IInstantiationService) { super(); }
 
@@ -35,9 +36,20 @@ export class DecorationService extends Disposable implements IDecorationService
     const decoration = this._instantiationService.createInstance(Decoration, decorationOptions, this._container);
     this._decorations.push(decoration);
     decoration.onDispose(() => this._decorations.splice(this._decorations.indexOf(decoration), 1));
+    this._queueRefresh();
     return decoration;
   }
 
+  private _queueRefresh(): void {
+    if (this._animationFrame !== undefined) {
+      return;
+    }
+    this._animationFrame = window.requestAnimationFrame(() => {
+      this.refresh();
+      this._animationFrame = undefined;
+    });
+  }
+
   public refresh(shouldRecreate?: boolean): void {
     if (!this._renderService) {
       return;