Next.js is bypassing server action calls

When I invoke multiple server actions, some of them take longer due to retrieving large datasets.

While reloading, the drag and drop functionality for widgets is not triggered until all server actions are completed and loading indicators are removed. The drag and drop widget is implemented as a server action and I am using async/await. It seems that during the loading phase, calls related to the drag and drop function are being skipped.

const moveColumn = async (dragIndex, hoverIndex) => {
    try {
        setLoading(true);
        const dragColumn = widgets[dragIndex];
        const newColumns = [...widgets];
        newColumns.splice(dragIndex, 1);
        newColumns.splice(hoverIndex, 0, dragColumn);

        const getItems = localStorage.getItem("widgetSettings");
        const settingDoc = JSON.parse(getItems);
        const updatedSettings = {
            ...settingDoc,
            widgets: newColumns
        };

        setWidgets(newColumns);

        localStorage.setItem("widgetSettings", JSON.stringify(updatedSettings));
        debugger;
        updateUserSettings(updatedSettings).then(() => {
            debugger;
            setLoading(false);
        });
        debugger;
    } catch (error) {
        console.log(error);
    }
};

The console before the updateUserSettings is working but the console after updateUserSettings is not working. If I will use the then block then both work but the updateUserSettings is not calling in both of the cases.

I applied the debugger, but it's not entering the debugger block within the then function.

Server Actions are primarily intended for performing server-side mutations, such as updating a database or modifying the state. They are not designed for fetching data. Consequently, frameworks implementing Server Actions execute them sequentially and do not cache their return values.

Complete answer is here