fix: animate loader in iframe

Inline the ClipLoader from react-spinners, as the library relies on style injection which doesn't play well with the iframe encapsulation.
measuredco · May 30, 2024 · 151a267 · 151a267
1 parent acaf727
commit 151a267
Show file tree

Hide file tree

Showing 10 changed files with 63 additions and 47 deletions.
diff --git a/packages/core/components/Button/Button.tsx b/packages/core/components/Button/Button.tsx
@@ -1,7 +1,7 @@
 import { ReactNode, useEffect, useState } from "react";
 import styles from "./Button.module.css";
 import getClassNameFactory from "../../lib/get-class-name-factory";
-import { ClipLoader } from "react-spinners";
+import { Loader } from "../Loader";
 
 const getClassName = getClassNameFactory("Button", styles);
 
@@ -66,7 +66,7 @@ export const Button = ({
       {children}
       {loading && (
         <div className={getClassName("spinner")}>
-          <ClipLoader aria-label="loading" color="inherit" size="14px" />
+          <Loader size={14} />
         </div>
       )}
     </ElementType>

diff --git a/packages/core/components/DraggableComponent/index.tsx b/packages/core/components/DraggableComponent/index.tsx
@@ -11,9 +11,9 @@ import getClassNameFactory from "../../lib/get-class-name-factory";
 import { Copy, Trash } from "lucide-react";
 import { useModifierHeld } from "../../lib/use-modifier-held";
 import { isIos } from "../../lib/is-ios";
-import { ClipLoader } from "react-spinners";
 import { useAppContext } from "../Puck/context";
 import { DefaultDraggable } from "../Draggable";
+import { Loader } from "../Loader";
 
 const getClassName = getClassNameFactory("DraggableComponent", styles);
 
@@ -120,7 +120,7 @@ export const DraggableComponent = ({
           {debug}
           {isLoading && (
             <div className={getClassName("loadingOverlay")}>
-              <ClipLoader aria-label="loading" size={16} color="inherit" />
+              <Loader />
             </div>
           )}
 

diff --git a/packages/core/components/ExternalInput/index.tsx b/packages/core/components/ExternalInput/index.tsx
@@ -5,9 +5,9 @@ import { ExternalField } from "../../types/Fields";
 import { Link, Search, SlidersHorizontal, Unlock } from "lucide-react";
 import { Modal } from "../Modal";
 import { Heading } from "../Heading";
-import { ClipLoader } from "react-spinners";
+import { Loader } from "../Loader";
 import { Button } from "../Button";
-import { AutoFieldPrivate, FieldLabelInternal } from "../AutoField";
+import { AutoFieldPrivate } from "../AutoField";
 import { IconButton } from "../IconButton";
 
 const getClassName = getClassNameFactory("ExternalInput", styles);
@@ -255,7 +255,7 @@ export const ExternalInput = ({
               </table>
 
               <div className={getClassNameModal("loadingBanner")}>
-                <ClipLoader size={24} aria-label="Loading" />
+                <Loader size={24} />
               </div>
             </div>
           </div>

diff --git a/packages/core/components/IconButton/IconButton.tsx b/packages/core/components/IconButton/IconButton.tsx
@@ -1,7 +1,7 @@
 import { ReactNode, SyntheticEvent, useState } from "react";
 import styles from "./IconButton.module.css";
 import getClassNameFactory from "../../lib/get-class-name-factory";
-import { ClipLoader } from "react-spinners";
+import { Loader } from "../Loader";
 
 const getClassName = getClassNameFactory("IconButton", styles);
 
@@ -61,7 +61,7 @@ export const IconButton = ({
       {loading && (
         <>
           &nbsp;&nbsp;
-          <ClipLoader aria-label="Loading" color="inherit" size="14px" />
+          <Loader size={14} />
         </>
       )}
     </ElementType>

diff --git a/packages/core/components/Loader/index.tsx b/packages/core/components/Loader/index.tsx
@@ -0,0 +1,26 @@
+import { getClassNameFactory } from "../../lib";
+import styles from "./styles.module.css";
+
+const getClassName = getClassNameFactory("Loader", styles);
+
+export const Loader = ({
+  color,
+  size = 16,
+  ...props
+}: {
+  color?: string;
+  size?: number;
+} & JSX.IntrinsicAttributes) => {
+  return (
+    <span
+      className={getClassName()}
+      style={{
+        width: size,
+        height: size,
+        color,
+      }}
+      aria-label="loading"
+      {...props}
+    />
+  );
+};
diff --git a/packages/core/components/Loader/styles.module.css b/packages/core/components/Loader/styles.module.css
@@ -0,0 +1,21 @@
+@keyframes loader-animation {
+  0% {
+    transform: rotate(0deg) scale(1);
+  }
+  50% {
+    transform: rotate(180deg) scale(0.8);
+  }
+  100% {
+    transform: rotate(360deg) scale(1);
+  }
+}
+
+.Loader {
+  background: transparent;
+  border-radius: 100%;
+  border: 2px solid currentColor;
+  border-bottom-color: transparent;
+  display: inline-block;
+  animation: loader-animation 1s 0s infinite linear;
+  animation-fill-mode: both;
+}
diff --git a/packages/core/components/Puck/components/Fields/index.tsx b/packages/core/components/Puck/components/Fields/index.tsx
@@ -1,4 +1,4 @@
-import { ClipLoader } from "react-spinners";
+import { Loader } from "../../../Loader";
 import { rootDroppableId } from "../../../../lib/root-droppable-id";
 import {
   ReplaceAction,
@@ -36,7 +36,7 @@ const DefaultFields = ({
       {children}
       {isLoading && (
         <div className={getClassName("loadingOverlay")}>
-          <ClipLoader aria-label="loading" />
+          <Loader size="32" />
         </div>
       )}
     </div>

diff --git a/packages/core/components/SidebarSection/index.tsx b/packages/core/components/SidebarSection/index.tsx
@@ -5,7 +5,7 @@ import { Heading } from "../Heading";
 import { ChevronRight } from "lucide-react";
 import { useBreadcrumbs } from "../../lib/use-breadcrumbs";
 import { useAppContext } from "../Puck/context";
-import { ClipLoader } from "react-spinners";
+import { Loader } from "../Loader";
 
 const getClassName = getClassNameFactory("SidebarSection", styles);
 
@@ -59,7 +59,7 @@ export const SidebarSection = ({
       <div className={getClassName("content")}>{children}</div>
       {isLoading && (
         <div className={getClassName("loadingOverlay")}>
-          <ClipLoader aria-label="loading" />
+          <Loader size={32} />
         </div>
       )}
     </div>

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -65,7 +65,6 @@
     "object-hash": "^3.0.0",
     "react-frame-component": "^5.2.6",
     "react-hotkeys-hook": "^4.4.1",
-    "react-spinners": "^0.13.8",
     "ua-parser-js": "^1.0.37",
     "use-debounce": "^9.0.4",
     "uuid": "^9.0.1"

diff --git a/yarn.lock b/yarn.lock
@@ -11157,11 +11157,6 @@ [email protected]:
   dependencies:
     "@remix-run/router" "1.12.0"
 
-react-spinners@^0.13.8:
-  version "0.13.8"
-  resolved "https://registry.yarnpkg.com/react-spinners/-/react-spinners-0.13.8.tgz#5262571be0f745d86bbd49a1e6b49f9f9cb19acc"
-  integrity sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==
-
 react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
@@ -12126,16 +12121,7 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -12217,14 +12203,7 @@ stringify-entities@^4.0.0:
     character-entities-html4 "^2.0.0"
     character-entities-legacy "^3.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -13592,7 +13571,7 @@ wordwrap@^1.0.0:
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -13610,15 +13589,6 @@ wrap-ansi@^6.0.1, wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"