diff --git a/src/components/App.tsx b/src/components/App.tsx index 611ff47b4..3e39b6f49 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -2377,6 +2377,7 @@ class App extends React.Component { toast: { message: string; closable?: boolean; + spinner?: boolean; duration?: number; } | null, ) => { diff --git a/src/components/Toast.scss b/src/components/Toast.scss index d236edd1f..956931064 100644 --- a/src/components/Toast.scss +++ b/src/components/Toast.scss @@ -25,6 +25,17 @@ white-space: pre-wrap; } + .Toast__message--spinner { + padding: 0 3rem; + } + + .Toast__spinner { + position: absolute; + left: 1.5rem; + top: 50%; + margin-top: -8px; + } + .close { position: absolute; top: 0; diff --git a/src/components/Toast.tsx b/src/components/Toast.tsx index be0c46663..100c89031 100644 --- a/src/components/Toast.tsx +++ b/src/components/Toast.tsx @@ -1,5 +1,7 @@ +import clsx from "clsx"; import { useCallback, useEffect, useRef } from "react"; import { CloseIcon } from "./icons"; +import Spinner from "./Spinner"; import "./Toast.scss"; import { ToolButton } from "./ToolButton"; @@ -9,12 +11,14 @@ export const Toast = ({ message, onClose, closable = false, + spinner = true, // To prevent autoclose, pass duration as Infinity duration = DEFAULT_TOAST_TIMEOUT, }: { message: string; onClose: () => void; closable?: boolean; + spinner?: boolean; duration?: number; }) => { const timerRef = useRef(0); @@ -44,7 +48,18 @@ export const Toast = ({ onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} > -

{message}

+ {spinner && ( +
+ +
+ )} +

+ {message} +

{closable && ( { this.excalidrawAPI.setToast({ message: t("toast.reconnectRoomServer"), duration: Infinity, + spinner: true, closable: false, }); }