Add comments loading state action (#21834)

ref https://github.com/TryGhost/Ghost/pull/21788#discussion_r1869802093

- Introduced `setCommentsIsLoading` action to handle the loading state
of comments dynamically.
- Updated `setOrder` function to dispatch the `setCommentsIsLoading`
action, ensuring proper UI feedback during asynchronous operations.

apps/comments-ui/src/actions.ts

@@ -22,8 +22,14 @@ async function loadMoreComments({state, api, options, order}: {state: EditableAp
     };
 }
 
-async function setOrder({state, data: {order}, options, api}: {state: EditableAppContext, data: {order: string}, options: CommentsOptions, api: GhostApi}) {
+function setCommentsIsLoading({data: isLoading}: {data: boolean | null}) {
-    state.commentsIsLoading = true;
+    return {
+        commentsIsLoading: isLoading
+    };
+}
+
+async function setOrder({state, data: {order}, options, api, dispatchAction}: {state: EditableAppContext, data: {order: string}, options: CommentsOptions, api: GhostApi, dispatchAction: DispatchActionType}) {
+    dispatchAction('setCommentsIsLoading', true);
 
     try {
         let data;
@@ -474,7 +480,8 @@ export const Actions = {
     setOrder,
     openCommentForm,
     highlightComment,
-    setHighlightComment
+    setHighlightComment,
+    setCommentsIsLoading
 };
 
 export type ActionType = keyof typeof Actions;