fix react-toastify with setTimeout

src/components/views/Catalog.jsx

@@ -2,7 +2,7 @@ import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react
 import { Helmet } from 'react-helmet-async';
 import InfiniteScroll from 'react-infinite-scroller';
 import { Link, useNavigate, useParams } from 'react-router-dom';
-import { useAccount, useFeed, usePublishComment, useSubscribe } from '@plebbit/plebbit-react-hooks';
+import { useFeed, usePublishComment, useSubscribe } from '@plebbit/plebbit-react-hooks';
 import { debounce } from 'lodash';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import { Container, NavBar, Header, Break, PostForm, PostFormLink, PostFormTable } from '../styled/Board.styled';
@@ -38,8 +38,6 @@ const Catalog = () => {
     showPostFormLink,
   } = useGeneralStore(state => state);
 
-  const account = useAccount();
-
   const nameRef = useRef();
   const subjectRef = useRef();
   const commentRef = useRef();

src/components/views/Subscriptions.jsx

@@ -30,7 +30,7 @@ const Subscriptions = () => {
   const {
     defaultSubplebbits,
     isSettingsOpen, setIsSettingsOpen,
-    selectedAddress, setSelectedAddress,
+    setSelectedAddress,
     setSelectedParentCid,
     setSelectedShortCid,
     selectedStyle,

src/hooks/useError.js

@@ -3,13 +3,14 @@ import { toast } from "react-toastify";
 
 const useError = (message) => {
   useEffect(() => {
-    if (message) {
+    if (message && message.length > 0) {
+      const showErrorToast = () => {
         const toastId = toast.error(message.toString(), {
           position: "top-right",
           autoClose: false,
-        hideProgressBar: false,
+          hideProgressBar: true,
           closeOnClick: false,
-        pauseOnHover: true,
+          pauseOnHover: false,
           draggable: false,
           progress: undefined,
           theme: "dark",
@@ -18,6 +19,13 @@ const useError = (message) => {
         return () => {
           toast.dismiss(toastId);
         };
+      };
+
+      const timeoutId = setTimeout(showErrorToast, 500);
+
+      return () => {
+        clearTimeout(timeoutId);
+      };
     }
   }, [message]);
 };

src/hooks/useSuccess.js

@@ -3,7 +3,8 @@ import { toast } from "react-toastify";
 
 const useSuccess = (message) => {
   useEffect(() => {
-    if (message) {
+    if (message && message.length > 0) {
+      const showSuccessToast = () => {
         const toastId = toast.success(message.toString(), {
           position: "top-right",
           autoClose: 3000,
@@ -18,6 +19,13 @@ const useSuccess = (message) => {
         return () => {
           toast.dismiss(toastId);
         };
+      };
+
+      const timeoutId = setTimeout(showSuccessToast, 500);
+
+      return () => {
+        clearTimeout(timeoutId);
+      };
     }
   }, [message]);
 };