[WEB-1116] chore: add fallback for the live server (#5622)

* chore: add fallback for the live server

* fix: update provider document after patch request

* chore: make the health check call only on connection fail

* chore: update debounce interval

* refactor: remove useSwr call for healtch check

* fix: pages fallback init

web/core/hooks/use-auto-save.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useRef } from "react";
 import { debounce } from "lodash";
 
-const AUTO_SAVE_TIME = 10000;
+const AUTO_SAVE_TIME = 30000;
 
-const useAutoSave = (handleSaveDescription: (forceSync?: boolean, yjsAsUpdate?: Uint8Array) => void) => {
+const useAutoSave = (handleSaveDescription: () => void) => {
   const intervalIdRef = useRef<any>(null);
   const handleSaveDescriptionRef = useRef(handleSaveDescription);
 
@@ -16,7 +16,7 @@ const useAutoSave = (handleSaveDescription: (forceSync?: boolean, yjsAsUpdate?:
   useEffect(() => {
     intervalIdRef.current = setInterval(() => {
       try {
-        handleSaveDescriptionRef.current(true);
+        handleSaveDescriptionRef.current();
       } catch (error) {
         console.error("Autosave before manual save failed:", error);
       }
@@ -43,7 +43,7 @@ const useAutoSave = (handleSaveDescription: (forceSync?: boolean, yjsAsUpdate?:
         clearInterval(intervalIdRef.current);
         intervalIdRef.current = setInterval(() => {
           try {
-            handleSaveDescriptionRef.current(true);
+            handleSaveDescriptionRef.current();
           } catch (error) {
             console.error("Autosave after manual save failed:", error);
           }

web/core/hooks/use-page-fallback.ts

@@ -0,0 +1,48 @@
+import { useCallback, useEffect } from "react";
+// plane editor
+import { EditorRefApi } from "@plane/editor";
+// plane types
+import { TDocumentPayload } from "@plane/types";
+// hooks
+import useAutoSave from "@/hooks/use-auto-save";
+
+type TArgs = {
+  editorRef: React.RefObject<EditorRefApi>;
+  fetchPageDescription: () => Promise<any>;
+  hasConnectionFailed: boolean;
+  updatePageDescription: (data: TDocumentPayload) => Promise<void>;
+};
+
+export const usePageFallback = (args: TArgs) => {
+  const { editorRef, fetchPageDescription, hasConnectionFailed, updatePageDescription } = args;
+
+  const handleUpdateDescription = useCallback(async () => {
+    if (!hasConnectionFailed) return;
+    const editor = editorRef.current;
+    if (!editor) return;
+
+    const latestEncodedDescription = await fetchPageDescription();
+    const latestDecodedDescription = latestEncodedDescription
+      ? new Uint8Array(latestEncodedDescription)
+      : new Uint8Array();
+
+    editor.setProviderDocument(latestDecodedDescription);
+    const { binary, html, json } = editor.getDocument();
+    if (!binary || !json) return;
+    const encodedBinary = Buffer.from(binary).toString("base64");
+
+    await updatePageDescription({
+      description_binary: encodedBinary,
+      description_html: html,
+      description: json,
+    });
+  }, [hasConnectionFailed]);
+
+  useEffect(() => {
+    if (hasConnectionFailed) {
+      handleUpdateDescription();
+    }
+  }, [hasConnectionFailed]);
+
+  useAutoSave(handleUpdateDescription);
+};