diff --git a/app/web/README.md b/app/web/README.md
index 27e9b8df06..4bdce7f897 100644
--- a/app/web/README.md
+++ b/app/web/README.md
@@ -41,7 +41,7 @@ This template should help get you started developing with Vue 3 and Typescript i
 
 ## IDE Setup Instructions
 ### [VSCode](https://code.visualstudio.com/) (preferred)
-  - Install [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) plugin and [Typescript Volar](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) plugin
+  - Install [Volar](https://marketplace.visualstudio.com/items?itemName=vue.volar) plugin and [Typescript Volar](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) plugin
     - and disable Vetur if installed
   - Enable TS "takeover mode" (see [here](https://github.com/johnsoncodehk/volar/discussions/471))
     - run "Extensions: Show built-in extensions" from command pallete
diff --git a/app/web/src/store/asset.store.ts b/app/web/src/store/asset.store.ts
index 0df390b910..5e37c8f154 100644
--- a/app/web/src/store/asset.store.ts
+++ b/app/web/src/store/asset.store.ts
@@ -17,7 +17,10 @@ import { PropKind } from "@/api/sdf/dal/prop";
 import { nonNullable } from "@/utils/typescriptLinter";
 import { ChangeSetId } from "@/api/sdf/dal/change_set";
 import { useFuncStore } from "./func/funcs.store";
-import { useChangeSetsStore } from "./change_sets.store";
+import {
+  useChangeSetsStore,
+  forceChangeSetApiRequest,
+} from "./change_sets.store";
 import { useModuleStore } from "./module.store";
 import { useRealtimeStore } from "./realtime/realtime.store";
 import handleStoreError from "./errors";
@@ -342,11 +345,10 @@ export const useAssetStore = (forceChangeSetId?: ChangeSetId) => {
         },
 
         async CREATE_VARIANT(name: string) {
-          if (changeSetStore.creatingChangeSet)
-            throw new Error("race, wait until the change set is created");
-          if (changeSetId === changeSetStore.headChangeSetId)
-            changeSetStore.creatingChangeSet = true;
-          return new ApiRequest<SchemaVariant, SchemaVariantCreateRequest>({
+          return forceChangeSetApiRequest<
+            SchemaVariant,
+            SchemaVariantCreateRequest
+          >({
             method: "post",
             url: "/variant/create_variant",
             params: {
@@ -365,12 +367,10 @@ export const useAssetStore = (forceChangeSetId?: ChangeSetId) => {
         },
 
         async CLONE_VARIANT(schemaVariantId: SchemaVariantId, name: string) {
-          if (changeSetStore.creatingChangeSet)
-            throw new Error("race, wait until the change set is created");
-          if (changeSetStore.headSelected)
-            changeSetStore.creatingChangeSet = true;
-
-          return new ApiRequest<SchemaVariant, SchemaVariantCloneRequest>({
+          return forceChangeSetApiRequest<
+            SchemaVariant,
+            SchemaVariantCloneRequest
+          >({
             method: "post",
             keyRequestStatusBy: schemaVariantId,
             url: "/variant/clone_variant",
@@ -439,7 +439,7 @@ export const useAssetStore = (forceChangeSetId?: ChangeSetId) => {
               `cant save locked schema variant (${schemaVariant.displayName},${schemaVariant.schemaVariantId})`,
             );
 
-          return new ApiRequest<
+          return forceChangeSetApiRequest<
             { success: boolean; assetFuncId: FuncId },
             SchemaVariantSaveRequest
           >({
@@ -460,17 +460,12 @@ export const useAssetStore = (forceChangeSetId?: ChangeSetId) => {
           });
         },
         async REGENERATE_VARIANT(schemaVariantId: SchemaVariantId) {
-          if (changeSetStore.creatingChangeSet)
-            throw new Error("race, wait until the change set is created");
-          if (changeSetStore.headSelected)
-            changeSetStore.creatingChangeSet = true;
-
           this.detachmentWarnings = [];
           const variant = this.variantFromListById[schemaVariantId];
           if (!variant)
             throw new Error(`${schemaVariantId} Variant does not exist`);
 
-          return new ApiRequest<{
+          return forceChangeSetApiRequest<{
             schemaVariantId: SchemaVariantId;
           }>({
             method: "post",
@@ -498,14 +493,9 @@ export const useAssetStore = (forceChangeSetId?: ChangeSetId) => {
         },
 
         async CREATE_UNLOCKED_COPY(id: SchemaVariantId) {
-          if (changeSetStore.creatingChangeSet)
-            throw new Error("race, wait until the change set is created");
-          if (changeSetStore.headSelected)
-            changeSetStore.creatingChangeSet = true;
-
           this.detachmentWarnings = [];
 
-          return new ApiRequest<SchemaVariant>({
+          return forceChangeSetApiRequest<SchemaVariant>({
             method: "post",
             url: API_PREFIX.concat([id]),
             keyRequestStatusBy: id,
@@ -543,12 +533,7 @@ export const useAssetStore = (forceChangeSetId?: ChangeSetId) => {
           });
         },
         async DELETE_UNLOCKED_VARIANT(id: SchemaVariantId) {
-          if (changeSetStore.creatingChangeSet)
-            throw new Error("race, wait until the change set is created");
-          if (changeSetStore.headSelected)
-            changeSetStore.creatingChangeSet = true;
-
-          return new ApiRequest<SchemaVariant>({
+          return forceChangeSetApiRequest<SchemaVariant>({
             method: "delete",
             url: API_PREFIX.concat([id]),
             keyRequestStatusBy: id,
diff --git a/app/web/src/store/change_sets.store.ts b/app/web/src/store/change_sets.store.ts
index 0bb35c04ee..dad804da4d 100644
--- a/app/web/src/store/change_sets.store.ts
+++ b/app/web/src/store/change_sets.store.ts
@@ -1,7 +1,12 @@
 import { defineStore } from "pinia";
 import * as _ from "lodash-es";
 import { watch } from "vue";
-import { ApiRequest, addStoreHooks, URLPattern } from "@si/vue-lib/pinia";
+import {
+  ApiRequest,
+  addStoreHooks,
+  URLPattern,
+  ApiRequestDescription,
+} from "@si/vue-lib/pinia";
 import { useToast } from "vue-toastification";
 import { ulid } from "ulid";
 import {
@@ -696,3 +701,30 @@ export function useChangeSetsStore() {
     }),
   )();
 }
+
+/**
+  * Perform an API request that will automatically create a new changeset.
+  *
+  * This will set `creatingChangeSet` to true, and will set it back to false if the
+  * request fails.
+  */
+export function forceChangeSetApiRequest<
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ Response = any,
+ RequestParams = Record<string, unknown>,
+>(requestSpec: ApiRequestDescription<Response, RequestParams>) {
+  const changeSetsStore = useChangeSetsStore();
+  if (changeSetsStore.creatingChangeSet)
+    throw new Error("race, wait until the change set is created");
+  if (changeSetsStore.headSelected) changeSetsStore.creatingChangeSet = true;
+
+ return new ApiRequest({
+   ...requestSpec,
+   onFail: (response) => {
+     changeSetsStore.creatingChangeSet = false;
+     if (requestSpec.onFail) {
+       requestSpec.onFail(response);
+     }
+   },
+ });
+},
diff --git a/app/web/src/store/component_attributes.store.ts b/app/web/src/store/component_attributes.store.ts
index 828619f159..383a8ab664 100644
--- a/app/web/src/store/component_attributes.store.ts
+++ b/app/web/src/store/component_attributes.store.ts
@@ -13,7 +13,10 @@ import {
 import { ComponentId } from "@/api/sdf/dal/component";
 import { ComponentType } from "@/api/sdf/dal/schema";
 import handleStoreError from "./errors";
-import { useChangeSetsStore } from "./change_sets.store";
+import {
+  useChangeSetsStore,
+  forceChangeSetApiRequest,
+} from "./change_sets.store";
 import { useRealtimeStore } from "./realtime/realtime.store";
 import { useComponentsStore } from "./components.store";
 
@@ -249,12 +252,9 @@ export const useComponentAttributesStore = (componentId: ComponentId) => {
           async REMOVE_PROPERTY_VALUE(
             removePayload: DeletePropertyEditorValueArgs,
           ) {
-            if (changeSetsStore.creatingChangeSet)
-              throw new Error("race, wait until the change set is created");
-            if (changeSetId === changeSetsStore.headChangeSetId)
-              changeSetsStore.creatingChangeSet = true;
-
-            return new ApiRequest<{ success: true }>({
+            return forceChangeSetApiRequest<{
+              success: true;
+            }>({
               method: "post",
               url: "component/delete_property_editor_value",
               params: {
@@ -270,11 +270,6 @@ export const useComponentAttributesStore = (componentId: ComponentId) => {
               | { update: UpdatePropertyEditorValueArgs }
               | { insert: InsertPropertyEditorValueArgs },
           ) {
-            if (changeSetsStore.creatingChangeSet)
-              throw new Error("race, wait until the change set is created");
-            if (changeSetId === changeSetsStore.headChangeSetId)
-              changeSetsStore.creatingChangeSet = true;
-
             const isInsert = "insert" in updatePayload;
 
             // If the valueid for this update does not exist in the values tree,
@@ -289,7 +284,9 @@ export const useComponentAttributesStore = (componentId: ComponentId) => {
               return;
             }
 
-            return new ApiRequest<{ success: true }>({
+            return forceChangeSetApiRequest<{
+              success: true;
+            }>({
               method: "post",
               url: isInsert
                 ? "component/insert_property_editor_value"
@@ -301,11 +298,6 @@ export const useComponentAttributesStore = (componentId: ComponentId) => {
             });
           },
           async SET_COMPONENT_TYPE(payload: SetTypeArgs) {
-            if (changeSetsStore.creatingChangeSet)
-              throw new Error("race, wait until the change set is created");
-            if (changeSetId === changeSetsStore.headChangeSetId)
-              changeSetsStore.creatingChangeSet = true;
-
             // NOTE Since views came in overriding geometries on this operation
             // became way more complex. Also frames start at the size of the
             // original component so this is not going to be a problem for now.
@@ -390,7 +382,9 @@ export const useComponentAttributesStore = (componentId: ComponentId) => {
             //   };
             // }
 
-            return new ApiRequest<{ success: true }>({
+            return forceChangeSetApiRequest<{
+              success: true;
+            }>({
               method: "post",
               url: "component/set_type",
               params: {
@@ -402,11 +396,9 @@ export const useComponentAttributesStore = (componentId: ComponentId) => {
           async RESET_PROPERTY_VALUE(
             resetPayload: ResetPropertyEditorValueArgs,
           ) {
-            if (changeSetsStore.creatingChangeSet)
-              throw new Error("race, wait until the change set is created");
-            if (changeSetId === changeSetsStore.headChangeSetId)
-              changeSetsStore.creatingChangeSet = true;
-            return new ApiRequest<{ success: true }>({
+            return forceChangeSetApiRequest<{
+              success: true;
+            }>({
               method: "post",
               url: "component/restore_default_function",
               params: {
diff --git a/app/web/src/store/components.store.ts b/app/web/src/store/components.store.ts
index 3a5bd90235..537509ae61 100644
--- a/app/web/src/store/components.store.ts
+++ b/app/web/src/store/components.store.ts
@@ -38,7 +38,10 @@ import { CodeView } from "@/api/sdf/dal/code_view";
 import ComponentUpgrading from "@/components/toasts/ComponentUpgrading.vue";
 import { nonNullable } from "@/utils/typescriptLinter";
 import handleStoreError from "./errors";
-import { useChangeSetsStore } from "./change_sets.store";
+import {
+  useChangeSetsStore,
+  forceChangeSetApiRequest,
+} from "./change_sets.store";
 import { useAssetStore } from "./asset.store";
 import { useRealtimeStore } from "./realtime/realtime.store";
 import { useWorkspacesStore } from "./workspaces.store";
@@ -672,11 +675,6 @@ export const useComponentsStore = (forceChangeSetId?: ChangeSetId) => {
             from: { componentId: ComponentNodeId; socketId: SocketId },
             to: { componentId: ComponentNodeId; socketId: SocketId },
           ) {
-            if (changeSetsStore.creatingChangeSet)
-              throw new Error("race, wait until the change set is created");
-            if (changeSetId === changeSetsStore.headChangeSetId)
-              changeSetsStore.creatingChangeSet = true;
-
             const timestamp = new Date().toISOString();
 
             const newEdge = edgeFromRawEdge(false)({
@@ -692,7 +690,7 @@ export const useComponentsStore = (forceChangeSetId?: ChangeSetId) => {
               },
             });
 
-            return new ApiRequest({
+            return forceChangeSetApiRequest({
               method: "post",
               url: "diagram/create_connection",
               params: {
@@ -823,12 +821,7 @@ export const useComponentsStore = (forceChangeSetId?: ChangeSetId) => {
             toComponentId: ComponentId,
             fromComponentId: ComponentId,
           ) {
-            if (changeSetsStore.creatingChangeSet)
-              throw new Error("race, wait until the change set is created");
-            if (changeSetId === changeSetsStore.headChangeSetId)
-              changeSetsStore.creatingChangeSet = true;
-
-            return new ApiRequest({
+            return forceChangeSetApiRequest({
               method: "post",
               url: "diagram/delete_connection",
               keyRequestStatusBy: edgeId,
@@ -885,12 +878,9 @@ export const useComponentsStore = (forceChangeSetId?: ChangeSetId) => {
             componentIds: ComponentId[],
             forceErase = false,
           ) {
-            if (changeSetsStore.creatingChangeSet)
-              throw new Error("race, wait until the change set is created");
-            if (changeSetId === changeSetsStore.headChangeSetId)
-              changeSetsStore.creatingChangeSet = true;
-
-            return new ApiRequest<Record<ComponentId, boolean>>({
+            return forceChangeSetApiRequest<
+              Record<ComponentId, boolean>
+            >({
               method: "post",
               url: "diagram/delete_components",
               keyRequestStatusBy: componentIds,
@@ -940,12 +930,7 @@ export const useComponentsStore = (forceChangeSetId?: ChangeSetId) => {
           },
 
           async RESTORE_COMPONENTS(...components: ComponentId[]) {
-            if (changeSetsStore.creatingChangeSet)
-              throw new Error("race, wait until the change set is created");
-            if (changeSetId === changeSetsStore.headChangeSetId)
-              changeSetsStore.creatingChangeSet = true;
-
-            return new ApiRequest({
+            return forceChangeSetApiRequest({
               method: "post",
               url: "diagram/remove_delete_intent",
               keyRequestStatusBy: Object.keys(components),
diff --git a/app/web/src/store/func/funcs.store.ts b/app/web/src/store/func/funcs.store.ts
index 59fed9bc37..d7f2731810 100644
--- a/app/web/src/store/func/funcs.store.ts
+++ b/app/web/src/store/func/funcs.store.ts
@@ -31,7 +31,10 @@ import { useAssetStore } from "@/store/asset.store";
 import { SchemaVariant, SchemaVariantId } from "@/api/sdf/dal/schema";
 import { DefaultMap } from "@/utils/defaultmap";
 import { ComponentId } from "@/api/sdf/dal/component";
-import { useChangeSetsStore } from "../change_sets.store";
+import {
+  useChangeSetsStore,
+  forceChangeSetApiRequest,
+} from "../change_sets.store";
 import { useRealtimeStore } from "../realtime/realtime.store";
 import { useComponentsStore } from "../components.store";
 
@@ -343,12 +346,10 @@ export const useFuncStore = () => {
           kind: FuncKind;
           binding: FuncBinding;
         }) {
-          if (changeSetsStore.creatingChangeSet)
-            throw new Error("race, wait until the change set is created");
-          if (changeSetsStore.headSelected)
-            changeSetsStore.creatingChangeSet = true;
-
-          return new ApiRequest<{ summary: FuncSummary; code: FuncCode }>({
+          return forceChangeSetApiRequest<{
+            summary: FuncSummary;
+            code: FuncCode;
+          }>({
             method: "post",
             url: API_PREFIX,
             params: { ...createFuncRequest },
@@ -357,9 +358,6 @@ export const useFuncStore = () => {
               this.funcCodeById[response.code.funcId] = response.code;
               // select the fn to load it in the editor done in the component
             },
-            onFail: () => {
-              changeSetsStore.creatingChangeSet = false;
-            },
           });
         },
         async CREATE_UNLOCKED_COPY(
@@ -395,13 +393,9 @@ export const useFuncStore = () => {
           });
         },
         async UPDATE_FUNC(func: FuncSummary) {
-          if (changeSetsStore.creatingChangeSet)
-            throw new Error("race, wait until the change set is created");
-          if (changeSetsStore.headSelected)
-            changeSetsStore.creatingChangeSet = true;
           const isHead = changeSetsStore.headSelected;
 
-          return new ApiRequest({
+          return forceChangeSetApiRequest({
             method: "put",
             url: API_PREFIX.concat([{ funcId: func.funcId }]),
             params: {
@@ -428,19 +422,11 @@ export const useFuncStore = () => {
                 }
               };
             },
-            onFail: () => {
-              changeSetsStore.creatingChangeSet = false;
-            },
             keyRequestStatusBy: func.funcId,
           });
         },
         async CREATE_BINDING(funcId: FuncId, bindings: FuncBinding[]) {
-          if (changeSetsStore.creatingChangeSet)
-            throw new Error("race, wait until the change set is created");
-          if (changeSetsStore.headSelected)
-            changeSetsStore.creatingChangeSet = true;
-
-          return new ApiRequest<FuncBinding[]>({
+          return forceChangeSetApiRequest<FuncBinding[]>({
             method: "post",
             url: API_PREFIX.concat([{ funcId }, "bindings"]),
             params: {
@@ -506,89 +492,49 @@ export const useFuncStore = () => {
                   _bindings.managementBindings;
               }
             },
-            onFail: () => {
-              changeSetsStore.creatingChangeSet = false;
-            },
           });
         },
         async UPDATE_BINDING(funcId: FuncId, bindings: FuncBinding[]) {
-          if (changeSetsStore.creatingChangeSet)
-            throw new Error("race, wait until the change set is created");
-          if (changeSetsStore.headSelected)
-            changeSetsStore.creatingChangeSet = true;
-
-          return new ApiRequest<null>({
+          return forceChangeSetApiRequest<null>({
             method: "put",
             url: API_PREFIX.concat([{ funcId }, "bindings"]),
             params: {
               funcId,
               bindings,
             },
-            onFail: () => {
-              changeSetsStore.creatingChangeSet = false;
-            },
           });
         },
         // How you "DETACH" an attribute function
         async RESET_ATTRIBUTE_BINDING(funcId: FuncId, bindings: FuncBinding[]) {
-          if (changeSetsStore.creatingChangeSet)
-            throw new Error("race, wait until the change set is created");
-          if (changeSetsStore.headSelected)
-            changeSetsStore.creatingChangeSet = true;
-
-          return new ApiRequest<null>({
+          return forceChangeSetApiRequest<null>({
             method: "post",
             url: API_PREFIX.concat([{ funcId }, "reset_attribute_binding"]),
             params: {
               bindings,
             },
-            onFail: () => {
-              changeSetsStore.creatingChangeSet = false;
-            },
           });
         },
         // How you "DETACH" all other function bindings
         async DELETE_BINDING(funcId: FuncId, bindings: FuncBinding[]) {
-          if (changeSetsStore.creatingChangeSet)
-            throw new Error("race, wait until the change set is created");
-          if (changeSetsStore.headSelected)
-            changeSetsStore.creatingChangeSet = true;
-
-          return new ApiRequest<null>({
+          return forceChangeSetApiRequest<null>({
             method: "delete",
             url: API_PREFIX.concat([{ funcId }, "bindings"]),
             params: {
               bindings,
             },
-            onFail: () => {
-              changeSetsStore.creatingChangeSet = false;
-            },
           });
         },
         async CREATE_FUNC_ARGUMENT(funcId: FuncId, funcArg: FuncArgument) {
-          if (changeSetsStore.creatingChangeSet)
-            throw new Error("race, wait until the change set is created");
-          if (changeSetsStore.headSelected)
-            changeSetsStore.creatingChangeSet = true;
-
-          return new ApiRequest<null>({
+          return forceChangeSetApiRequest<null>({
             method: "post",
             url: API_PREFIX.concat([{ funcId }, "arguments"]),
             params: {
               ...funcArg,
             },
-            onFail: () => {
-              changeSetsStore.creatingChangeSet = false;
-            },
           });
         },
         async UPDATE_FUNC_ARGUMENT(funcId: FuncId, funcArg: FuncArgument) {
-          if (changeSetsStore.creatingChangeSet)
-            throw new Error("race, wait until the change set is created");
-          if (changeSetsStore.headSelected)
-            changeSetsStore.creatingChangeSet = true;
-
-          return new ApiRequest<null>({
+          return forceChangeSetApiRequest<null>({
             method: "put",
             url: API_PREFIX.concat([
               { funcId },
@@ -598,30 +544,19 @@ export const useFuncStore = () => {
             params: {
               ...funcArg,
             },
-            onFail: () => {
-              changeSetsStore.creatingChangeSet = false;
-            },
           });
         },
         async DELETE_FUNC_ARGUMENT(
           funcId: FuncId,
           funcArgumentId: FuncArgumentId,
         ) {
-          if (changeSetsStore.creatingChangeSet)
-            throw new Error("race, wait until the change set is created");
-          if (changeSetsStore.headSelected)
-            changeSetsStore.creatingChangeSet = true;
-
-          return new ApiRequest<null>({
+          return forceChangeSetApiRequest<null>({
             method: "delete",
             url: API_PREFIX.concat([
               { funcId },
               "arguments",
               { funcArgumentId },
             ]),
-            onFail: () => {
-              changeSetsStore.creatingChangeSet = false;
-            },
           });
         },
         async EXEC_FUNC(funcId: FuncId) {
@@ -633,18 +568,10 @@ export const useFuncStore = () => {
             });
           }
 
-          if (changeSetsStore.creatingChangeSet)
-            throw new Error("race, wait until the change set is created");
-          if (changeSetsStore.headSelected)
-            changeSetsStore.creatingChangeSet = true;
-
-          return new ApiRequest({
+          forceChangeSetApiRequest({
             method: "post",
             url: API_PREFIX.concat([{ funcId }, "execute"]),
             keyRequestStatusBy: funcId,
-            onFail: () => {
-              changeSetsStore.creatingChangeSet = false;
-            },
           });
         },
         async FETCH_PROTOTYPE_ARGUMENTS(
@@ -690,12 +617,7 @@ export const useFuncStore = () => {
           { command, subcommand }: AwsCliCommand,
           schemaVariantId: SchemaVariantId,
         ) {
-          if (changeSetsStore.creatingChangeSet)
-            throw new Error("race, wait until the change set is created");
-          if (changeSetsStore.headSelected)
-            changeSetsStore.creatingChangeSet = true;
-
-          return new ApiRequest<{
+          return forceChangeSetApiRequest<{
             command: string;
             subcommand: string;
             schemaVariantId: SchemaVariantId;
@@ -743,13 +665,10 @@ export const useFuncStore = () => {
         },
 
         async SAVE_FUNC(func: FuncCode) {
-          return new ApiRequest<FuncCode>({
+          return forceChangeSetApiRequest<FuncCode>({
             method: "put",
             url: API_PREFIX.concat([{ funcId: func.funcId }, "code"]),
             params: { code: func.code },
-            onFail: () => {
-              changeSetsStore.creatingChangeSet = false;
-            },
           });
         },
       },
diff --git a/app/web/src/store/module.store.ts b/app/web/src/store/module.store.ts
index 559e52349a..2930ceeef0 100644
--- a/app/web/src/store/module.store.ts
+++ b/app/web/src/store/module.store.ts
@@ -11,7 +11,10 @@ import {
   ModuleContributeRequest,
   ModuleId,
 } from "@/api/sdf/dal/module";
-import { useChangeSetsStore } from "./change_sets.store";
+import {
+  useChangeSetsStore,
+  forceChangeSetApiRequest,
+} from "./change_sets.store";
 import { useRouterStore } from "./router.store";
 import { useRealtimeStore } from "./realtime/realtime.store";
 import { ModuleIndexApiRequest } from ".";
@@ -370,12 +373,7 @@ export const useModuleStore = () => {
           },
 
           async INSTALL_REMOTE_MODULE(moduleIds: ModuleId[]) {
-            if (changeSetsStore.creatingChangeSet)
-              throw new Error("race, wait until the change set is created");
-            if (changeSetId === changeSetsStore.headChangeSetId)
-              changeSetsStore.creatingChangeSet = true;
-
-            return new ApiRequest<{ id: string }>({
+            return forceChangeSetApiRequest<{ id: string }>({
               method: "post",
               url: "/module/install_module",
               keyRequestStatusBy: moduleIds,
@@ -383,9 +381,6 @@ export const useModuleStore = () => {
                 ids: moduleIds,
                 ...getVisibilityParams(),
               },
-              onFail: () => {
-                changeSetsStore.creatingChangeSet = false;
-              },
               onSuccess: () => {
                 // reset installed list
                 this.SYNC();
diff --git a/app/web/src/store/secrets.store.ts b/app/web/src/store/secrets.store.ts
index 3d13c0d4f2..99582e94e2 100644
--- a/app/web/src/store/secrets.store.ts
+++ b/app/web/src/store/secrets.store.ts
@@ -4,7 +4,10 @@ import * as _ from "lodash-es";
 
 import { POSITION, useToast } from "vue-toastification";
 import { useAuthStore } from "@/store/auth.store";
-import { useChangeSetsStore } from "@/store/change_sets.store";
+import {
+  useChangeSetsStore,
+  forceChangeSetApiRequest,
+} from "@/store/change_sets.store";
 import { useWorkspacesStore } from "@/store/workspaces.store";
 import { encryptMessage } from "@/utils/messageEncryption";
 import { PropertyEditorPropWidgetKind } from "@/api/sdf/dal/property_editor";
@@ -217,11 +220,6 @@ export function useSecretsStore() {
             });
           },
           async UPDATE_SECRET(secret: Secret, value?: Record<string, string>) {
-            if (changeSetsStore.creatingChangeSet)
-              throw new Error("race, wait until the change set is created");
-            if (changeSetId === changeSetsStore.headChangeSetId)
-              changeSetsStore.creatingChangeSet = true;
-
             if (_.isEmpty(secret.name)) {
               throw new Error("All secrets must have a name.");
             }
@@ -282,7 +280,7 @@ export function useSecretsStore() {
             }
 
             let toastID: number | string;
-            return new ApiRequest<Secret>({
+            return forceChangeSetApiRequest<Secret>({
               method: "patch",
               url: "secret",
               params,
@@ -355,9 +353,6 @@ export function useSecretsStore() {
                 );
                 this.secretIsTransitioning[id] = false;
               },
-              onFail: () => {
-                changeSetsStore.creatingChangeSet = false;
-              },
             });
           },
           async SAVE_SECRET(
@@ -366,11 +361,6 @@ export function useSecretsStore() {
             value: Record<string, string>,
             description?: string,
           ) {
-            if (changeSetsStore.creatingChangeSet)
-              throw new Error("race, wait until the change set is created");
-            if (changeSetId === changeSetsStore.headChangeSetId)
-              changeSetsStore.creatingChangeSet = true;
-
             if (_.isEmpty(name)) {
               throw new Error("All secrets must have a name.");
             }
@@ -406,7 +396,7 @@ export function useSecretsStore() {
             const crypted = await encryptMessage(value, this.publicKey);
 
             let toastID: number | string;
-            return new ApiRequest<Secret>({
+            return forceChangeSetApiRequest<Secret>({
               method: "post",
               url: "secret",
               params: {
@@ -484,22 +474,14 @@ export function useSecretsStore() {
                 );
                 this.secretIsTransitioning[tempId] = false;
               },
-              onFail: () => {
-                changeSetsStore.creatingChangeSet = false;
-              },
             });
           },
           async DELETE_SECRET(id: SecretId) {
-            if (changeSetsStore.creatingChangeSet)
-              throw new Error("race, wait until the change set is created");
-            if (changeSetId === changeSetsStore.headChangeSetId)
-              changeSetsStore.creatingChangeSet = true;
-
             const secret = this.secretsById[id];
 
             if (_.isNil(secret)) return;
 
-            return new ApiRequest<Secret>({
+            return forceChangeSetApiRequest<Secret>({
               method: "delete",
               url: "secret",
               params: {
diff --git a/app/web/src/store/views.store.ts b/app/web/src/store/views.store.ts
index 62f413b5ff..c3cdaf6371 100644
--- a/app/web/src/store/views.store.ts
+++ b/app/web/src/store/views.store.ts
@@ -34,6 +34,7 @@ import handleStoreError from "./errors";
 
 import {
   useChangeSetsStore,
+  forceChangeSetApiRequest,
   diagramUlid as clientUlid,
 } from "./change_sets.store";
 import { useComponentsStore, processRawComponent } from "./components.store";
@@ -776,11 +777,6 @@ export const useViewsStore = (forceChangeSetId?: ChangeSetId) => {
           parentId?: string,
           size?: Size2D,
         ) {
-          if (changeSetsStore.creatingChangeSet)
-            throw new Error("race, wait until the change set is created");
-          if (changeSetId === changeSetsStore.headChangeSetId)
-            changeSetsStore.creatingChangeSet = true;
-
           const categoryVariant =
             componentsStore.categoryVariantById[categoryVariantId];
           if (!categoryVariant) {
@@ -800,7 +796,7 @@ export const useViewsStore = (forceChangeSetId?: ChangeSetId) => {
 
           const tempInsertId = _.uniqueId("temp-insert-component");
 
-          return new ApiRequest<{
+          return forceChangeSetApiRequest<{
             componentId: ComponentId;
             installedVariant?: SchemaVariant;
           }>({
@@ -864,11 +860,6 @@ export const useViewsStore = (forceChangeSetId?: ChangeSetId) => {
           }[],
           newParentNodeId?: ComponentId,
         ) {
-          if (changeSetsStore.creatingChangeSet)
-            throw new Error("race, wait until the change set is created");
-          if (changeSetId === changeSetsStore.headChangeSetId)
-            changeSetsStore.creatingChangeSet = true;
-
           if (components.length === 0) return;
 
           const tempInserts = _.map(components, (c) => ({
@@ -896,7 +887,7 @@ export const useViewsStore = (forceChangeSetId?: ChangeSetId) => {
             },
           }));
 
-          return new ApiRequest<{
+          return forceChangeSetApiRequest<{
             id: string;
           }>({
             method: "post",
@@ -929,6 +920,11 @@ export const useViewsStore = (forceChangeSetId?: ChangeSetId) => {
                 delete this.pendingInsertedComponents[id];
               }
             },
+            onFail: () => {
+              for (const { id } of tempInserts) {
+                delete this.pendingInsertedComponents[id];
+              }
+            },
           });
         },