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"