From d14d998cd0f121c2ba084a96d21502ca9fbfba79 Mon Sep 17 00:00:00 2001 From: Braedin Date: Tue, 27 Feb 2024 01:00:28 -0600 Subject: [PATCH] Add example for loading type + include loader on loading type --- src/index.tsx | 4 +--- website/src/components/Types/Types.tsx | 20 ++++++++++++++++++++ 2 files changed, 21 insertions(+), 3 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index a8041a0..5831b5f 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -363,9 +363,7 @@ const Toast = (props: ToastProps) => { <> {toastType || toast.icon || toast.promise ? (
- {toast.promise && toast.type === 'loading' && !toast.icon - ? toast.icon || icons?.loading || getLoadingIcon() - : null} + {toast.type === 'loading' && !toast.icon ? toast.icon || icons?.loading || getLoadingIcon() : null} {toast.type !== 'loading' ? toast.icon || icons?.[toastType] || getAsset(toastType) : null}
) : null} diff --git a/website/src/components/Types/Types.tsx b/website/src/components/Types/Types.tsx index bf85405..249c6dc 100644 --- a/website/src/components/Types/Types.tsx +++ b/website/src/components/Types/Types.tsx @@ -83,6 +83,26 @@ const allTypes = [ }, }), }, + { + name: 'Loading', + snippet: ` +const loadingId = toast.loading('Loading...'); +... +toast.success('Done loading', { + id: loadingId +}) +`, + action: () => { + const loadingId = toast.loading('Loading...'); + new Promise((resolve) => { + setTimeout(() => { + toast.success('Done loading', { + id: loadingId, + }); + }, 2000); + }); + }, + }, { name: 'Promise', snippet: `const promise = () => new Promise((resolve) => setTimeout(() => resolve({ name: 'Sonner' }), 2000));