fix(ThemeProvider): wrapping injectThemeVariables in requestAnimation…

…Frame so that it won´t interfere with style tag initialization (#120)
SAP · Sep 14, 2019 · 77cb45d · 77cb45d
1 parent 7effa56
commit 77cb45d
Showing 1 changed file with 10 additions and 8 deletions.
diff --git a/packages/main/src/components/ThemeProvider/index.tsx b/packages/main/src/components/ThemeProvider/index.tsx
@@ -42,14 +42,16 @@ const ThemeProvider: FC<ThemeProviderProps> = (props) => {
         const styleElement = document.head.querySelector('style[data-ui5-webcomponents-theme-properties]');
         // only inject parameters for sap_fiori_3 and if they haven't been injected before
         if (theme === Themes.sap_fiori_3 && !styleElement.textContent) {
-          injectThemeProperties(fiori3Theme);
-          const CSSVarsPonyfill = window['CSSVarsPonyfill'];
-          if (Device.browser.msie && CSSVarsPonyfill) {
-            setTimeout(() => {
-              CSSVarsPonyfill.resetCssVars();
-              CSSVarsPonyfill.cssVars();
-            }, 0);
-          }
+          requestAnimationFrame(() => {
+            injectThemeProperties(fiori3Theme);
+            const CSSVarsPonyfill = window['CSSVarsPonyfill'];
+            if (Device.browser.msie && CSSVarsPonyfill) {
+              setTimeout(() => {
+                CSSVarsPonyfill.resetCssVars();
+                CSSVarsPonyfill.cssVars();
+              }, 0);
+            }
+          });
         }
       });
     }