From 151a2675bf8e700368aad0652192bc7d9fd2bbd6 Mon Sep 17 00:00:00 2001 From: Chris Villa Date: Wed, 29 May 2024 18:06:01 +0100 Subject: [PATCH] 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. --- packages/core/components/Button/Button.tsx | 4 +-- .../components/DraggableComponent/index.tsx | 4 +-- .../core/components/ExternalInput/index.tsx | 6 ++-- .../core/components/IconButton/IconButton.tsx | 4 +-- packages/core/components/Loader/index.tsx | 26 ++++++++++++++ .../core/components/Loader/styles.module.css | 21 +++++++++++ .../Puck/components/Fields/index.tsx | 4 +-- .../core/components/SidebarSection/index.tsx | 4 +-- packages/core/package.json | 1 - yarn.lock | 36 ++----------------- 10 files changed, 63 insertions(+), 47 deletions(-) create mode 100644 packages/core/components/Loader/index.tsx create mode 100644 packages/core/components/Loader/styles.module.css diff --git a/packages/core/components/Button/Button.tsx b/packages/core/components/Button/Button.tsx index 87fcade4be..60da96b4f3 100644 --- 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 && (
- +
)} diff --git a/packages/core/components/DraggableComponent/index.tsx b/packages/core/components/DraggableComponent/index.tsx index 13c68e4d2d..c8b82951ef 100644 --- 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 && (
- +
)} diff --git a/packages/core/components/ExternalInput/index.tsx b/packages/core/components/ExternalInput/index.tsx index 218e5b6410..54d7867894 100644 --- 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 = ({
- +
diff --git a/packages/core/components/IconButton/IconButton.tsx b/packages/core/components/IconButton/IconButton.tsx index 71fd18fd7a..1e49723873 100644 --- 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 && ( <>    - + )} diff --git a/packages/core/components/Loader/index.tsx b/packages/core/components/Loader/index.tsx new file mode 100644 index 0000000000..e54ca900c1 --- /dev/null +++ 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 ( + + ); +}; diff --git a/packages/core/components/Loader/styles.module.css b/packages/core/components/Loader/styles.module.css new file mode 100644 index 0000000000..684071dbc2 --- /dev/null +++ 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 index 4a6ee909a4..c354239a85 100644 --- 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 && (
- +
)} diff --git a/packages/core/components/SidebarSection/index.tsx b/packages/core/components/SidebarSection/index.tsx index 1ed18c6172..3a82ef6824 100644 --- 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 = ({
{children}
{isLoading && (
- +
)} diff --git a/packages/core/package.json b/packages/core/package.json index 5dca19fe2c..6891fc5189 100644 --- 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 index f8f36caae6..5f838b0fd7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11157,11 +11157,6 @@ react-router@6.19.0: 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"