Merge branch 'master' of github.com:payloadcms/payload into feat/revisions

src/admin/components/elements/PreviewButton/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useAuth } from '@payloadcms/config-provider';
 import Button from '../Button';
 import { Props } from './types';
@@ -6,13 +6,34 @@ import { useLocale } from '../../utilities/Locale';
 
 const baseClass = 'preview-btn';
 
-const PreviewButton: React.FC<Props> = ({ generatePreviewURL, data }) => {
+const PreviewButton: React.FC<Props> = (props) => {
+  const {
+    generatePreviewURL,
+    data
+  } = props;
+
+  const [url, setUrl] = useState<string | undefined>(undefined);
+
   const locale = useLocale();
   const { token } = useAuth();
 
-  if (generatePreviewURL && typeof generatePreviewURL === 'function') {
-    const url = generatePreviewURL(data, { locale, token });
+  useEffect(() => {
+    if (generatePreviewURL && typeof generatePreviewURL === 'function') {
+      const makeRequest = async () => {
+        const previewURL = await generatePreviewURL(data, { locale, token });
+        setUrl(previewURL);
+      }
 
+      makeRequest();
+    }
+  }, [
+    generatePreviewURL,
+    locale,
+    token,
+    data
+  ]);
+
+  if (url) {
     return (
       <Button
         el="anchor"