dont show banners on duplicate errors

components/layout/index.tsx

@@ -7,12 +7,14 @@ import {
 } from "@chakra-ui/react";
 import { t } from "@lingui/macro";
 import { AppProps } from "next/app";
+import { useState } from "react";
 import { SWRConfig } from "swr";
 import Footer from "./Footer";
 import IconNavBar from "./IconNavBar";
 import TopNav from "./TopNav";
 
 const Layout = ({ Component, pageProps }: AppProps) => {
+  const [errors, setErrors] = useState(new Set<string>());
   const toast = useToast();
   const bannerColor = useColorModeValue("lightblue", "black");
 
@@ -27,13 +29,19 @@ const Layout = ({ Component, pageProps }: AppProps) => {
           }),
         revalidateOnFocus: false,
         revalidateOnReconnect: false,
-        onError: () => {
+        onError: (_, key) => {
+          if (errors.has(key)) return;
+          setErrors(new Set([...errors, key]));
           toast({
             duration: null,
             isClosable: true,
             position: "top-right",
             status: "error",
             description: t`An error occurred`,
+            onCloseComplete: () =>
+              setErrors(
+                new Set(Array.from(errors).filter((error) => error !== key))
+              ),
           });
         },
       }}

pages/_app.tsx

@@ -109,10 +109,6 @@ const getUsersLanguage = () => {
 };
 
 const setDisplayedLanguage = () => {
-  const browserLanguage = navigator.languages
-    ? navigator.languages[0]
-    : navigator.language || "en";
-  const locale = window.localStorage.getItem("locale") ?? browserLanguage;
   activateLocale(getUsersLanguage());
 };