use document from theme context

zendeskgarden · Nov 16, 2020 · 746d624 · 746d624
1 parent a38c10d
commit 746d624
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 14 deletions.
diff --git a/packages/loaders/.size-snapshot.json b/packages/loaders/.size-snapshot.json
@@ -19,21 +19,21 @@
     }
   },
   "index.cjs.js": {
-    "bundled": 25958,
-    "minified": 19359,
-    "gzipped": 4979
+    "bundled": 26190,
+    "minified": 19459,
+    "gzipped": 5017
   },
   "index.esm.js": {
-    "bundled": 24159,
-    "minified": 17771,
-    "gzipped": 4832,
+    "bundled": 24398,
+    "minified": 17875,
+    "gzipped": 4873,
     "treeshaked": {
       "rollup": {
-        "code": 13914,
-        "import_statements": 352
+        "code": 14041,
+        "import_statements": 403
       },
       "webpack": {
-        "code": 15824
+        "code": 15958
       }
     }
   }

diff --git a/packages/loaders/src/elements/Dots.tsx b/packages/loaders/src/elements/Dots.tsx
@@ -5,9 +5,11 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useContext } from 'react';
 import PropTypes from 'prop-types';
+import { ThemeContext } from 'styled-components';
 import { useSchedule } from '@zendeskgarden/container-schedule';
+import { useDocument } from '@zendeskgarden/react-theming';
 import {
   StyledDotsCircleOne,
   StyledDotsCircleTwo,
@@ -37,17 +39,23 @@ export interface IDotsProps extends React.HTMLAttributes<SVGSVGElement> {
   delayMS?: number;
 }
 
-const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-const canTransformSVG = 'transform' in svg;
-
 const Dots: React.FC<IDotsProps> = ({ size, color, duration, delayMS, ...other }) => {
+  const theme = useContext(ThemeContext);
+  const environment = useDocument(theme);
+  const canTransformSVG = useRef<boolean | null>(null);
+
+  if (environment && canTransformSVG.current === null) {
+    const svg = environment.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    canTransformSVG.current = 'transform' in svg;
+  }
+
   const { delayComplete } = useSchedule({ duration, delayMS, loop: true });
   const dotOne = useRef<SVGCircleElement>(null);
   const dotTwo = useRef<SVGCircleElement>(null);
   const dotThree = useRef<SVGCircleElement>(null);
 
   useEffect(() => {
-    if (!canTransformSVG && delayComplete) {
+    if (!canTransformSVG.current && delayComplete) {
       const transforms = [
         window.getComputedStyle(dotOne.current!).getPropertyValue('transform'),
         window.getComputedStyle(dotTwo.current!).getPropertyValue('transform'),