fix(feedback): Add FeedbackWidget to SSR (#7870)

* fix(feedback): Add `FeedbackWidget` to SSR

Follow-up to #7761 -- fixes hydration warnings/errors due to mismatched component tree.

Author: billyvg

gatsby-browser.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import {GatsbyBrowser} from 'gatsby';
 
-import {FeedbackWidget} from 'sentry-docs/components/feedback/feedbackWidget';
+import {FeedbackWidgetLoader} from 'sentry-docs/components/feedback/feedbackWidgetLoader';
 import PageContext from 'sentry-docs/components/pageContext';
 
 export const wrapPageElement: GatsbyBrowser['wrapPageElement'] = ({
   element,
   props: {pageContext},
 }) => <PageContext.Provider value={pageContext}>
-        <FeedbackWidget />
+        <FeedbackWidgetLoader />
         {element}
     </PageContext.Provider>
 

gatsby-ssr.tsx

@@ -4,6 +4,7 @@
 import React from 'react';
 import {GatsbySSR} from 'gatsby';
 
+import {FeedbackWidgetLoader} from 'sentry-docs/components/feedback/feedbackWidgetLoader';
 import {PageContext} from 'sentry-docs/components/pageContext';
 
 const sentryEnvironment = process.env.GATSBY_ENV || process.env.NODE_ENV || 'development';
@@ -12,7 +13,12 @@ const sentryLoaderUrl = process.env.SENTRY_LOADER_URL;
 export const wrapPageElement: GatsbySSR['wrapPageElement'] = ({
   element,
   props: {pageContext},
-}) => <PageContext.Provider value={pageContext}>{element}</PageContext.Provider>;
+}) => (
+  <PageContext.Provider value={pageContext}>
+    <FeedbackWidgetLoader />
+    {element}
+  </PageContext.Provider>
+);
 
 export const onPreRenderHTML: GatsbySSR['onPreRenderHTML'] = ({getHeadComponents}) => {
   if (process.env.NODE_ENV !== 'production') {

src/components/feedback/feedbackWidget.tsx

@@ -26,7 +26,7 @@ async function sendFeedback(
   return response;
 }
 
-export function FeedbackWidget() {
+export default function FeedbackWidget() {
   const [open, setOpen] = useState(false);
   const [showSuccessMessage, setShowSuccessMessage] = useState(false);
 

src/components/feedback/feedbackWidgetLoader.tsx

@@ -0,0 +1,20 @@
+import React, {lazy} from 'react';
+
+const FeedbackWidget = lazy(() => import('./feedbackWidget'));
+
+/**
+ * Only render FeedbackWidget on client as it needs access to `window`
+ */
+export function FeedbackWidgetLoader() {
+  const isSSR = typeof window === 'undefined';
+
+  return (
+    <React.Fragment>
+      {!isSSR && (
+        <React.Suspense fallback={<div />}>
+          <FeedbackWidget />
+        </React.Suspense>
+      )}
+    </React.Fragment>
+  );
+}