feat(formula-field): fix error state

src/components/fields/Formula/DisplayCell.tsx

@@ -1,9 +1,11 @@
+import CircularProgressOptical from "@src/components/CircularProgressOptical";
 import { IDisplayCellProps } from "@src/components/fields/types";
+
 import { useFormula } from "./useFormula";
 import { getDisplayCell } from "./util";
 
 export default function Formula(props: IDisplayCellProps) {
-  const { result, error } = useFormula({
+  const { result, error, loading } = useFormula({
     row: props.row,
     listenerFields: props.column.config?.listenerFields || [],
     formulaFn: props.column.config?.formulaFn || "",
@@ -13,7 +15,11 @@ export default function Formula(props: IDisplayCellProps) {
   const DisplayCell = getDisplayCell(type);
 
   if (error) {
-    return <>Error ${error}</>;
+    return <>Error: {error.message}</>;
+  }
+
+  if (loading) {
+    return <CircularProgressOptical id="progress" size={20} sx={{ m: 0.25 }} />;
   }
 
   return <DisplayCell {...props} value={result} disabled={true} />;

src/components/fields/Formula/Settings.tsx

@@ -1,6 +1,8 @@
 import { lazy, Suspense } from "react";
 import { useDebouncedCallback } from "use-debounce";
-import { ISettingsProps } from "@src/components/fields/types";
+import { useAtom } from "jotai";
+import MultiSelect from "@rowy/multiselect";
+
 import {
   Grid,
   InputLabel,
@@ -9,13 +11,13 @@ import {
   FormHelperText,
   Tooltip,
 } from "@mui/material";
-import FieldSkeleton from "@src/components/SideDrawer/FieldSkeleton";
 
-import { useAtom } from "jotai";
+import FieldSkeleton from "@src/components/SideDrawer/FieldSkeleton";
+import { ISettingsProps } from "@src/components/fields/types";
 import { tableColumnsOrderedAtom, tableScope } from "@src/atoms/tableScope";
-import { defaultFn, listenerFieldTypes, outputFieldTypes } from "./util";
-import MultiSelect from "@rowy/multiselect";
 import FieldsDropdown from "@src/components/ColumnModals/FieldsDropdown";
+
+import { defaultFn, listenerFieldTypes, outputFieldTypes } from "./util";
 import { getFieldProp } from "..";
 
 /* eslint-disable import/no-webpack-loader-syntax */

src/components/fields/Formula/formula.d.ts

@@ -1,8 +1,8 @@
 type FormulaContext = {
   row: Row;
-  //   ref: FirebaseFirestore.DocumentReference;
-  //   storage: firebasestorage.Storage;
-  //   db: FirebaseFirestore.Firestore;
+  // ref: FirebaseFirestore.DocumentReference;
+  // storage: firebasestorage.Storage;
+  // db: FirebaseFirestore.Firestore;
 };
 
 type Formula = (context: FormulaContext) => "PLACEHOLDER_OUTPUT_TYPE";

src/components/fields/Formula/useFormula.tsx

@@ -1,8 +1,10 @@
-import { tableColumnsOrderedAtom, tableScope } from "@src/atoms/tableScope";
-import { TableRow } from "@src/types/table";
-import { useAtom } from "jotai";
-import { pick, zipObject } from "lodash-es";
 import { useEffect, useMemo, useState } from "react";
+import { pick, zipObject } from "lodash-es";
+import { useAtom } from "jotai";
+
+import { TableRow } from "@src/types/table";
+import { tableColumnsOrderedAtom, tableScope } from "@src/atoms/tableScope";
+
 import {
   getFunctionBody,
   listenerFieldTypes,
@@ -50,11 +52,6 @@ export const useFormula = ({
     const worker = new Worker(new URL("./worker.ts", import.meta.url), {
       type: "module",
     });
-    // const timeout = setTimeout(() => {
-    //   setError(new Error("timeout"));
-    //   setLoading(false);
-    //   worker.terminate();
-    // }, 1000);
     worker.onmessage = ({ data: { result, error } }: any) => {
       worker.terminate();
       if (error) {
@@ -63,7 +60,6 @@ export const useFormula = ({
         setResult(result);
       }
       setLoading(false);
-      // clearInterval(timeout);
     };
 
     worker.postMessage({
@@ -73,7 +69,6 @@ export const useFormula = ({
 
     return () => {
       worker.terminate();
-      // clearInterval(timeout);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [useDeepCompareMemoize(listeners), formulaFn]);

src/components/fields/Formula/worker.ts

@@ -8,7 +8,7 @@ onmessage = async ({ data }) => {
   } catch (error: any) {
     console.error("error: ", error);
     postMessage({
-      error: new Error("Something went wrong. Check console logs."),
+      error,
     });
   } finally {
     // eslint-disable-next-line no-restricted-globals