@vonaffenfels/contentful-slate-editor 1.0.33 → 1.0.35

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/contentful-slate-editor",
-    "version": "1.0.33",
+    "version": "1.0.35",
     "scripts": {
         "prepublish": "yarn run build",
         "dev": "yarn run start",
@@ -89,10 +89,10 @@
         "webpack-dev-server": "^4.0.0-beta.2"
     },
     "dependencies": {
-        "@vonaffenfels/slate-editor": "^1.0.33",
+        "@vonaffenfels/slate-editor": "^1.0.35",
         "webpack": "5.88.2"
     },
-    "gitHead": "a5d858b33c49e6a1a53f90951749159b06452db5",
+    "gitHead": "8531e3bdf7affdda47f286a5786cd7778044f1fc",
     "publishConfig": {
         "access": "public"
     }

package/src/components/EditorField.js

@@ -12,6 +12,8 @@ import storybookStories from "storybookStories";
 import componentLoader from "@vonaffenfels/slate-editor/componentLoader";
 
 let isLoadingCountGlobal = 0;
+let loaderTimeout;
+let isInitialLoad = true;
 
 const EditorField = ({
     fieldSdk,
@@ -64,6 +66,10 @@ const EditorField = ({
         if (windowSdk) {
             windowSdk.startAutoResizer();
         }
+
+        setTimeout(() => {
+            isInitialLoad = false;
+        }, 1000);
     }, []);
 
     useEffect(() => {
@@ -92,6 +98,55 @@ const EditorField = ({
         fakeActiveContent[field] = entrySdk.fields[field].getValue();
     }
 
+    const executeLoader = async (block, attributes) => {
+        let loaderResult = {};
+
+        setIsLoadingCount(++isLoadingCountGlobal);
+
+        try {
+            const fetchUrl = `/api/loader/?${new URLSearchParams({
+                portal: portal,
+                block: block,
+                variables: JSON.stringify({
+                    ...attributes,
+                    entries: null,
+                    items: null,
+                }),
+            })}`;
+
+            loaderResult = await fetch(fetchUrl).then(res => res.json());
+
+            if (loaderResult) {
+                for (let key in loaderResult) {
+                    attributes[key] = loaderResult[key];
+                }
+            }
+        } catch (e) {
+            console.error(`Error in loader for ${block}`);
+            console.error(e);
+        }
+
+        setIsLoadingCount(--isLoadingCountGlobal);
+
+        return loaderResult;
+    };
+
+    const getLoaderResult = async (block, attributes) => {
+        return new Promise((resolve, reject) => {
+            if (isInitialLoad) {
+                executeLoader(block, attributes).then(result => resolve(result));
+
+                return;
+            }
+
+            clearTimeout(loaderTimeout);
+
+            loaderTimeout = setTimeout(async () => {
+                resolve(await executeLoader(block, attributes));
+            }, 1000);
+        });
+    };
+
     return <div ref={wrapperRef} className="editor-field h-full">
         <BlockEditor
             onChange={onChange}
@@ -102,37 +157,7 @@ const EditorField = ({
             storybookComponentLoader={componentLoader}
             storybookStories={storybookStories}
             isLoading={isLoadingCount !== 0}
-            storybookComponentDataLoader={async (block, attributes) => {
-                let loaderResult = {};
-                setIsLoadingCount(++isLoadingCountGlobal);
-
-                try {
-                    const fetchUrl = `/api/loader/?${new URLSearchParams({
-                        portal: portal,
-                        block: block,
-                        variables: JSON.stringify({
-                            ...attributes,
-                            entries: null,
-                            items: null,
-                        }),
-                    })}`;
-
-                    loaderResult = await fetch(fetchUrl).then(res => res.json());
-
-                    if (loaderResult) {
-                        for (let key in loaderResult) {
-                            attributes[key] = loaderResult[key];
-                        }
-                    }
-                } catch (e) {
-                    console.error(`Error in loader for ${block}`);
-                    console.error(e);
-                }
-
-                setIsLoadingCount(--isLoadingCountGlobal);
-
-                return loaderResult;
-            }}
+            storybookComponentDataLoader={async (block, attributes) => await getLoaderResult(block, attributes)}
             onStorybookElementClick={onStorybookElementClick}
         />
     </div>;