fix(Embed): get rid of white flash

CHANGELOG.md

@@ -25,6 +25,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix `CreateShorthandOptions` should be typed @lucivpav ([#1886](https://github.com/stardust-ui/react/pull/1886))
 - Add `shadowLevel1Dark` in Teams themes @notandrew ([#1887](https://github.com/stardust-ui/react/pull/1887))
 - When merging themes use deep merge for site and component variables @miroslavstastny ([#1907](https://github.com/stardust-ui/react/pull/1907))
+- Fix white flash when activating `Embed` component @lucivpav ([#1909](https://github.com/stardust-ui/react/pull/1909))
 
 ### Features
 - Add `TextArea` component @lucivpav ([#1897](https://github.com/stardust-ui/react/pull/1897))

packages/react/src/components/Embed/Embed.tsx

@@ -14,7 +14,7 @@ import {
 import { embedBehavior } from '../../lib/accessibility'
 import { Accessibility } from '../../lib/accessibility/types'
 import Icon, { IconProps } from '../Icon/Icon'
-import Image, { ImageProps } from '../Image/Image'
+import Image from '../Image/Image'
 import Video, { VideoProps } from '../Video/Video'
 import Box, { BoxProps } from '../Box/Box'
 import { ComponentEventHandler, WithAsProp, ShorthandValue, withSafeTypeForAs } from '../../types'
@@ -55,14 +55,15 @@ export interface EmbedProps extends UIComponentProps {
   onClick?: ComponentEventHandler<EmbedProps>
 
   /** Image source URL for when video isn't playing. */
-  placeholder?: ShorthandValue<ImageProps>
+  placeholder?: string
 
   /** Shorthand for an embedded video. */
   video?: ShorthandValue<VideoProps>
 }
 
 export interface EmbedState {
   active: boolean
+  iframeLoaded: boolean
 }
 
 class Embed extends AutoControlledComponent<WithAsProp<EmbedProps>, EmbedState> {
@@ -104,7 +105,7 @@ class Embed extends AutoControlledComponent<WithAsProp<EmbedProps>, EmbedState>
   }
 
   getInitialAutoControlledState(): EmbedState {
-    return { active: false }
+    return { active: false, iframeLoaded: false }
   }
 
   handleClick = e => {
@@ -123,8 +124,15 @@ class Embed extends AutoControlledComponent<WithAsProp<EmbedProps>, EmbedState>
 
   renderComponent({ ElementType, classes, accessibility, unhandledProps, styles, variables }) {
     const { control, iframe, placeholder, video } = this.props
-    const { active } = this.state
+    const { active, iframeLoaded } = this.state
     const controlVisible = !_.isNil(video) || !active
+    const placeholderImage = placeholder ? (
+      <Image
+        src={placeholder}
+        styles={styles.image}
+        variables={{ width: variables.width, height: variables.height }}
+      />
+    ) : null
 
     return (
       <ElementType
@@ -134,6 +142,7 @@ class Embed extends AutoControlledComponent<WithAsProp<EmbedProps>, EmbedState>
         {...unhandledProps}
         {...applyAccessibilityKeyHandlers(accessibility.keyHandlers.root, unhandledProps)}
       >
+        {iframe && active && !iframeLoaded && placeholderImage}
         {active ? (
           <>
             {Video.create(video, {
@@ -142,25 +151,28 @@ class Embed extends AutoControlledComponent<WithAsProp<EmbedProps>, EmbedState>
                 controls: false,
                 loop: true,
                 muted: true,
+                poster: placeholder,
                 styles: styles.video,
                 variables: {
                   width: variables.width,
                   height: variables.height,
                 },
               },
             })}
-            {Box.create(iframe, { defaultProps: { as: 'iframe', styles: styles.iframe } })}
+            {Box.create(iframe, {
+              defaultProps: {
+                as: 'iframe',
+                styles: styles.iframe,
+              },
+              overrideProps: {
+                onLoad: () => {
+                  this.setState({ iframeLoaded: true })
+                },
+              },
+            })}
           </>
         ) : (
-          Image.create(placeholder, {
-            defaultProps: {
-              styles: styles.image,
-              variables: {
-                width: variables.width,
-                height: variables.height,
-              },
-            },
-          })
+          placeholderImage
         )}
 
         {controlVisible &&

packages/react/src/themes/teams/components/Embed/embedStyles.ts

@@ -48,7 +48,8 @@ export default {
     top: '50%',
     transform: 'translate(-50%, -50%)',
   }),
-  iframe: (): ICSSInJSStyle => ({
+  iframe: ({ props: p }): ICSSInJSStyle => ({
     display: 'block',
+    visibility: p.iframeLoaded ? 'visible' : 'hidden',
   }),
 } as ComponentSlotStylesPrepared<EmbedProps & EmbedState, EmbedVariables>