fix: theme render flicker (breakpoints)

related muxinc/player.style#39

src/js/media-theme-element.ts

@@ -1,5 +1,6 @@
 import { MediaStateChangeEvents } from './constants.js';
 import MediaController from './media-controller.js';
+import { getOrInsertCSSRule } from './utils/element-utils.js';
 import { globalThis, document } from './utils/server-safe-globals.js';
 import { TemplateInstance } from './utils/template-parts.js';
 import { processor } from './utils/template-processor.js';
@@ -13,13 +14,20 @@ const observedMediaAttributes = {
   mediastreamtype: 'streamtype',
 };
 
+// For hiding the media-theme element until the breakpoints are available
+// display: none can't be used because it would prevent the element or its
+// children (media-controller) from getting dimensions.
+
 const prependTemplate = document.createElement('template');
 
 prependTemplate.innerHTML = /*html*/ `
   <style>
     :host {
       display: inline-block;
       line-height: 0;
+
+      /* Hide theme element until the breakpoints are available to avoid flicker. */
+      visibility: hidden;
     }
 
     media-controller {
@@ -242,6 +250,9 @@ export class MediaThemeElement extends globalThis.HTMLElement {
 
   render(): void {
     this.renderer?.update(this.props);
+
+    const { style } = getOrInsertCSSRule(this.renderRoot, ':host');
+    style.setProperty('visibility', 'visible');
   }
 }