feat: EditTileModal saving state (#577)

ernestii · web-flow · commit 5c9dfda9fefa · 2025-01-27T18:55:14.000Z
noticed that there's no instant feedback when adding/editing a tile
diff --git a/packages/app/src/DBDashboardPage.tsx b/packages/app/src/DBDashboardPage.tsx
@@ -322,11 +322,13 @@ const EditTileModal = ({
   chart,
   onClose,
   onSave,
+  isSaving,
   dateRange,
 }: {
   chart: Tile | undefined;
   onClose: () => void;
   dateRange: [Date, Date];
+  isSaving?: boolean;
   onSave: (chart: Tile) => void;
 }) => {
   return (
@@ -343,6 +345,7 @@ const EditTileModal = ({
           chartConfig={chart.config}
           setChartConfig={config => {}}
           dateRange={dateRange}
+          isSaving={isSaving}
           onSave={config => {
             onSave({
               ...chart,
@@ -665,6 +668,8 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
     );
   }, [createDashboard, router]);
 
+  const [isSaving, setIsSaving] = useState(false);
+
   return (
     <Box p="sm">
       <Head>
@@ -673,12 +678,18 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
       <OnboardingModal />
       <EditTileModal
         chart={editedTile}
-        onClose={() => setEditedTile(undefined)}
+        onClose={() => {
+          if (!isSaving) {
+            setEditedTile(undefined);
+          }
+        }}
         dateRange={searchedTimeRange}
+        isSaving={isSaving}
         onSave={newChart => {
           if (dashboard == null) {
             return;
           }
+          setIsSaving(true);
           setDashboard(
             produce(dashboard, draft => {
               const chartIndex = draft.tiles.findIndex(
@@ -693,6 +704,10 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
             }),
             () => {
               setEditedTile(undefined);
+              setIsSaving(false);
+            },
+            () => {
+              setIsSaving(false);
             },
           );
         }}
diff --git a/packages/app/src/components/DBEditTimeChartForm.tsx b/packages/app/src/components/DBEditTimeChartForm.tsx
@@ -35,6 +35,7 @@ import DBTableChart from '@/components/DBTableChart';
 import { DBTimeChart } from '@/components/DBTimeChart';
 import { SQLInlineEditorControlled } from '@/components/SQLInlineEditor';
 import { TimePicker } from '@/components/TimePicker';
+import { useUpdateDashboard } from '@/dashboard';
 import { GranularityPickerControlled } from '@/GranularityPicker';
 import SearchInputV2 from '@/SearchInputV2';
 import { getFirstTimestampValueExpression, useSource } from '@/source';
@@ -213,6 +214,7 @@ export default function EditTimeChartForm({
   chartConfig,
   displayedTimeInputValue,
   dateRange,
+  isSaving,
   onTimeRangeSearch,
   setChartConfig,
   setDisplayedTimeInputValue,
@@ -223,6 +225,7 @@ export default function EditTimeChartForm({
   chartConfig: SavedChartConfig;
   displayedTimeInputValue?: string;
   dateRange: [Date, Date];
+  isSaving?: boolean;
   onTimeRangeSearch?: (value: string) => void;
   setChartConfig: (chartConfig: SavedChartConfig) => void;
   setDisplayedTimeInputValue?: (value: string) => void;
@@ -587,6 +590,7 @@ export default function EditTimeChartForm({
         <Flex gap="sm">
           {onSave != null && (
             <Button
+              loading={isSaving}
               variant="outline"
               onClick={() => {
                 handleSubmit(v => {
@@ -598,7 +602,12 @@ export default function EditTimeChartForm({
             </Button>
           )}
           {onClose != null && (
-            <Button variant="subtle" color="dark.2" onClick={onClose}>
+            <Button
+              variant="subtle"
+              color="dark.2"
+              onClick={onClose}
+              disabled={isSaving}
+            >
               Cancel
             </Button>
           )}
diff --git a/packages/app/src/dashboard.ts b/packages/app/src/dashboard.ts
@@ -118,7 +118,11 @@ export function useDashboard({
   }, [isLocalDashboard, localDashboard, defaultDashboard, remoteDashboard]);
 
   const setDashboard = useCallback(
-    (newDashboard: Dashboard, onSuccess?: VoidFunction) => {
+    (
+      newDashboard: Dashboard,
+      onSuccess?: VoidFunction,
+      onError?: VoidFunction,
+    ) => {
       if (isLocalDashboard) {
         setLocalDashboard(newDashboard);
         onSuccess?.();
@@ -134,6 +138,7 @@ export function useDashboard({
               message: e.message.slice(0, 100),
               autoClose: 5000,
             });
+            onError?.();
           },
         });
       }
