diff --git a/src/components/fields/Formula/DisplayCell.tsx b/src/components/fields/Formula/DisplayCell.tsx
index e765bad1..b0cb61f8 100644
--- a/src/components/fields/Formula/DisplayCell.tsx
+++ b/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 ;
}
return ;
diff --git a/src/components/fields/Formula/Settings.tsx b/src/components/fields/Formula/Settings.tsx
index ebce8995..ad0eb16f 100644
--- a/src/components/fields/Formula/Settings.tsx
+++ b/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 */
diff --git a/src/components/fields/Formula/formula.d.ts b/src/components/fields/Formula/formula.d.ts
index 90f9351d..517b7e57 100644
--- a/src/components/fields/Formula/formula.d.ts
+++ b/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";
diff --git a/src/components/fields/Formula/useFormula.tsx b/src/components/fields/Formula/useFormula.tsx
index c0113c3b..b316eccd 100644
--- a/src/components/fields/Formula/useFormula.tsx
+++ b/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]);
diff --git a/src/components/fields/Formula/worker.ts b/src/components/fields/Formula/worker.ts
index 6c4fd21d..4c37bf5c 100644
--- a/src/components/fields/Formula/worker.ts
+++ b/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