Avoid flicker when replacing component instance

Author: MackinnonBuck

src/Components/Web.JS/dist/Release/blazor.server.js

@@ -9,11 +9,12 @@ import { attachToEventDelegator as attachNavigationManagerToEventDelegator } fro
 import { applyAnyDeferredValue, tryApplySpecialProperty } from './DomSpecialPropertyUtil';
 const sharedTemplateElemForParsing = document.createElement('template');
 const sharedSvgElemForParsing = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-const elementsToClearOnRootComponentRender: { [componentId: number]: LogicalElement } = {};
+const elementsToClearOnRootComponentRender = new Set<LogicalElement>();
 const internalAttributeNamePrefix = '__internal_';
 const eventPreventDefaultAttributeNamePrefix = 'preventDefault_';
 const eventStopPropagationAttributeNamePrefix = 'stopPropagation_';
 const interactiveRootComponentPropname = Symbol();
+const preserveContentOnDisposalPropname = Symbol();
 
 export class BrowserRenderer {
   public eventDelegator: EventDelegator;
@@ -47,7 +48,7 @@ export class BrowserRenderer {
     // If we want to preserve existing HTML content of the root element, we don't apply the mechanism for
     // clearing existing children. Rendered content will then append rather than replace the existing HTML content.
     if (!appendContent) {
-      elementsToClearOnRootComponentRender[componentId] = element;
+      elementsToClearOnRootComponentRender.add(element);
     }
   }
 
@@ -58,15 +59,13 @@ export class BrowserRenderer {
     }
 
     // On the first render for each root component, clear any existing content (e.g., prerendered)
-    const rootElementToClear = elementsToClearOnRootComponentRender[componentId];
-    if (rootElementToClear) {
-      delete elementsToClearOnRootComponentRender[componentId];
-      emptyLogicalElement(rootElementToClear);
+    if (elementsToClearOnRootComponentRender.delete(element)) {
+      emptyLogicalElement(element);
 
-      if (rootElementToClear instanceof Comment) {
+      if (element instanceof Comment) {
         // We sanitize start comments by removing all the information from it now that we don't need it anymore
         // as it adds noise to the DOM.
-        rootElementToClear.textContent = '!';
+        element.textContent = '!';
       }
     }
 
@@ -88,7 +87,12 @@ export class BrowserRenderer {
       // component was added.
       const logicalElement = this.childComponentLocations[componentId];
       markAsInteractiveRootComponentElement(logicalElement, false);
-      emptyLogicalElement(logicalElement);
+
+      if (shouldPreserveContentOnInteractiveComponentDisposal(logicalElement)) {
+        elementsToClearOnRootComponentRender.add(logicalElement);
+      } else {
+        emptyLogicalElement(logicalElement);
+      }
     }
 
     delete this.childComponentLocations[componentId];
@@ -377,6 +381,14 @@ export function isInteractiveRootComponentElement(element: LogicalElement): bool
   return element[interactiveRootComponentPropname];
 }
 
+export function setShouldPreserveContentOnInteractiveComponentDisposal(element: LogicalElement, shouldPreserve: boolean) {
+  element[preserveContentOnDisposalPropname] = shouldPreserve;
+}
+
+function shouldPreserveContentOnInteractiveComponentDisposal(element: LogicalElement): boolean {
+  return element[preserveContentOnDisposalPropname] === true;
+}
+
 export interface ComponentDescriptor {
   start: Node;
   end: Node;

src/Components/Web.JS/dist/Release/blazor.web.js

@@ -2,7 +2,7 @@
 // The .NET Foundation licenses this file to you under the MIT license.
 
 import { AutoComponentDescriptor, ComponentDescriptor, ServerComponentDescriptor, WebAssemblyComponentDescriptor, canMergeDescriptors, discoverComponents, mergeDescriptors } from '../../Services/ComponentDescriptorDiscovery';
-import { isInteractiveRootComponentElement } from '../BrowserRenderer';
+import { isInteractiveRootComponentElement, setShouldPreserveContentOnInteractiveComponentDisposal } from '../BrowserRenderer';
 import { applyAnyDeferredValue } from '../DomSpecialPropertyUtil';
 import { LogicalElement, getLogicalChildrenArray, getLogicalNextSibling, getLogicalParent, getLogicalRootDescriptor, insertLogicalChild, insertLogicalChildBefore, isLogicalElement, toLogicalElement, toLogicalRootCommentElement } from '../LogicalElements';
 import { synchronizeAttributes } from './AttributeSync';
@@ -331,7 +331,8 @@ function upgradeComponentCommentsToLogicalRootComments(root: Node): ComponentDes
     if (existingDescriptor) {
       allDescriptors.push(existingDescriptor);
     } else {
-      toLogicalRootCommentElement(descriptor);
+      const logicalElement = toLogicalRootCommentElement(descriptor);
+      setShouldPreserveContentOnInteractiveComponentDisposal(logicalElement, true);
 
       // Since we've already parsed the payloads from the start and end comments,
       // we sanitize them to reduce noise in the DOM.

src/Components/Web.JS/dist/Release/blazor.webview.js

@@ -341,17 +341,18 @@ export class WebRootComponentManager implements DescriptorHandler, RootComponent
         component.assignedRendererId = rendererId;
         component.uniqueIdAtLastUpdate = component.descriptor.uniqueId;
         return { type: 'add', ssrComponentId: component.ssrComponentId, marker: descriptorToMarker(component.descriptor) };
-      }
+      } else {
+        // The component has already been added for interactivity.
+        if (component.uniqueIdAtLastUpdate === component.descriptor.uniqueId) {
+          // The descriptor has not changed since the last update.
+          // Nothing to do.
+          return null;
+        }
 
-      if (component.uniqueIdAtLastUpdate === component.descriptor.uniqueId) {
-        // The descriptor has not changed since the last update.
-        // Nothing to do.
-        return null;
+        // The descriptor has changed since it was last updated, so we'll update the component's parameters.
+        component.uniqueIdAtLastUpdate = component.descriptor.uniqueId;
+        return { type: 'update', ssrComponentId: component.ssrComponentId, marker: descriptorToMarker(component.descriptor) };
       }
-
-      // The descriptor has changed since it was last updated, so we'll update the component's parameters.
-      component.uniqueIdAtLastUpdate = component.descriptor.uniqueId;
-      return { type: 'update', ssrComponentId: component.ssrComponentId, marker: descriptorToMarker(component.descriptor) };
     } else {
       // The descriptor was removed from the document.
       this.unregisterComponent(component);