fix(loaders): fix Dot loader for IE11 (#936)

zendeskgarden · Nov 17, 2020 · e6df514 · e6df514
1 parent 0d1ee64
commit e6df514
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 88 deletions.
diff --git a/packages/loaders/.size-snapshot.json b/packages/loaders/.size-snapshot.json
@@ -19,21 +19,21 @@
     }
   },
   "index.cjs.js": {
-    "bundled": 26822,
-    "minified": 19885,
-    "gzipped": 5153
+    "bundled": 26190,
+    "minified": 19459,
+    "gzipped": 5017
   },
   "index.esm.js": {
-    "bundled": 25021,
-    "minified": 18294,
-    "gzipped": 4999,
+    "bundled": 24398,
+    "minified": 17875,
+    "gzipped": 4873,
     "treeshaked": {
       "rollup": {
-        "code": 14395,
-        "import_statements": 366
+        "code": 14041,
+        "import_statements": 403
       },
       "webpack": {
-        "code": 16324
+        "code": 15958
       }
     }
   }

diff --git a/packages/loaders/src/elements/Dots.spec.tsx b/packages/loaders/src/elements/Dots.spec.tsx
@@ -9,12 +9,8 @@ import React from 'react';
 import { render, act } from 'garden-test-utils';
 import mockDate from 'mockdate';
 import Dots from './Dots';
-import { useCSSSVGAnimation } from '../utils/useCSSSVGAnimation';
 
 jest.useFakeTimers();
-jest.mock('../utils/useCSSSVGAnimation', () => ({
-  useCSSSVGAnimation: jest.fn(() => false)
-}));
 
 const DEFAULT_DATE = new Date(2019, 1, 5, 1, 1, 1);
 
@@ -51,7 +47,6 @@ describe('Dots', () => {
 
   describe('Animation', () => {
     it('relies on svg transition attribute if css svg animation is not supported', () => {
-      (useCSSSVGAnimation as jest.Mock).mockReturnValue(true);
       const { container } = render(<Dots data-test-id="dots" />);
 
       act(() => {
@@ -100,8 +95,6 @@ describe('Dots', () => {
           />
         </g>
       `);
-
-      (useCSSSVGAnimation as jest.Mock).mockReset();
     });
 
     it('updates animation after request animation frame', () => {
@@ -135,18 +128,21 @@ describe('Dots', () => {
             cx="9"
             cy="36"
             r="9"
+            transform=""
           />
           <circle
             class="c1"
             cx="40"
             cy="36"
             r="9"
+            transform=""
           />
           <circle
             class="c2"
             cx="71"
             cy="36"
             r="9"
+            transform=""
           />
         </g>
       `);
@@ -166,18 +162,21 @@ describe('Dots', () => {
             cx="9"
             cy="36"
             r="9"
+            transform=""
           />
           <circle
             class="sc-bdVaJa sc-htpNat yBsjz"
             cx="40"
             cy="36"
             r="9"
+            transform=""
           />
           <circle
             class="sc-bdVaJa sc-bxivhb eQgpbI"
             cx="71"
             cy="36"
             r="9"
+            transform=""
           />
         </g>
       `);
@@ -214,18 +213,21 @@ describe('Dots', () => {
             cx="9"
             cy="36"
             r="9"
+            transform=""
           />
           <circle
             class="c1"
             cx="40"
             cy="36"
             r="9"
+            transform=""
           />
           <circle
             class="c2"
             cx="71"
             cy="36"
             r="9"
+            transform=""
           />
         </g>
       `);
@@ -245,18 +247,21 @@ describe('Dots', () => {
             cx="9"
             cy="36"
             r="9"
+            transform=""
           />
           <circle
             class="sc-bdVaJa sc-htpNat kPGrdX"
             cx="40"
             cy="36"
             r="9"
+            transform=""
           />
           <circle
             class="sc-bdVaJa sc-bxivhb hGBsiB"
             cx="71"
             cy="36"
             r="9"
+            transform=""
           />
         </g>
       `);
@@ -293,18 +298,21 @@ describe('Dots', () => {
             cx="9"
             cy="36"
             r="9"
+            transform=""
           />
           <circle
             class="c1"
             cx="40"
             cy="36"
             r="9"
+            transform=""
           />
           <circle
             class="c2"
             cx="71"
             cy="36"
             r="9"
+            transform=""
           />
         </g>
       `);
@@ -324,18 +332,21 @@ describe('Dots', () => {
             cx="9"
             cy="36"
             r="9"
+            transform=""
           />
           <circle
             class="sc-bdVaJa sc-htpNat gYiuXr"
             cx="40"
             cy="36"
             r="9"
+            transform=""
           />
           <circle
             class="sc-bdVaJa sc-bxivhb iRhcNm"
             cx="71"
             cy="36"
             r="9"
+            transform=""
           />
         </g>
       `);

diff --git a/packages/loaders/src/elements/Dots.tsx b/packages/loaders/src/elements/Dots.tsx
@@ -5,17 +5,18 @@
  * 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,
   StyledDotsCircleThree,
   StyledSVG,
   StyledLoadingPlaceholder
 } from '../styled';
-import { useCSSSVGAnimation } from '../utils/useCSSSVGAnimation';
 
 const COMPONENT_ID = 'loaders.dots';
 
@@ -39,14 +40,23 @@ export interface IDotsProps extends React.HTMLAttributes<SVGSVGElement> {
 }
 
 const Dots: React.FC<IDotsProps> = ({ size, color, duration, delayMS, ...other }) => {
-  const noAnimatedSVGSupport = useCSSSVGAnimation();
-  const { delayComplete } = useSchedule({ duration, delayMS, loop: noAnimatedSVGSupport });
+  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 (noAnimatedSVGSupport && delayComplete) {
+    if (!canTransformSVG.current && delayComplete) {
       const transforms = [
         window.getComputedStyle(dotOne.current!).getPropertyValue('transform'),
         window.getComputedStyle(dotTwo.current!).getPropertyValue('transform'),

diff --git a/packages/loaders/src/utils/useCSSSVGAnimation.spec.tsx b/packages/loaders/src/utils/useCSSSVGAnimation.spec.tsx
diff --git a/packages/loaders/src/utils/useCSSSVGAnimation.ts b/packages/loaders/src/utils/useCSSSVGAnimation.ts