refactor(structure): add timeout to reconnecting message (#7531)

* refactor(structure): add timeout for reconnecting pane provider

* docs(structure): add comment

* refactor(structure): add timeout clean up

* chore(structure): update type

Co-authored-by: Bjørge Næss <bjoerge@gmail.com>

---------

Co-authored-by: Bjørge Næss <bjoerge@gmail.com>

packages/sanity/src/structure/panes/document/DocumentPaneProvider.tsx

@@ -748,12 +748,18 @@ export const DocumentPaneProvider = memo((props: DocumentPaneProviderProps) => {
   )
 
   useEffect(() => {
+    let timeout: ReturnType<typeof setTimeout>
     if (connectionState === 'reconnecting') {
-      pushToast({
-        id: 'sanity/structure/reconnecting',
-        status: 'warning',
-        title: t('panes.document-pane-provider.reconnecting.title'),
-      })
+      timeout = setTimeout(() => {
+        pushToast({
+          id: 'sanity/structure/reconnecting',
+          status: 'warning',
+          title: t('panes.document-pane-provider.reconnecting.title'),
+        })
+      }, 2000) // 2 seconds, we can iterate on the value
+    }
+    return () => {
+      if (timeout) clearTimeout(timeout)
     }
   }, [connectionState, pushToast, t])