fix: #631 c-loader-status no-initial-content flag now behaves more consistently.

Author: ascott18

CHANGELOG.md

@@ -1,5 +1,6 @@
 # 6.1.0
 - Added support for .NET 10
+- `c-loader-status`: The `initial-content` flag now behaves more consistently. A loader is now considered to have initial content if it has ever successfully invoked. Previously, some types of failures (e.g. network errors) would not clear this state, but other kinds of failures (explicit server error responses) did clear this state. If errors should result in hidden content, the `no-error-content` flag should be used.
 
 # 6.0.4
 - AuditLogging: Stored procedure cache was not being correctly persisted to avoid redundant `SELECT OBJECT_DEFINITION` queries.

docs/stacks/vue/coalesce-vue-vuetify/components/c-loader-status.md

@@ -175,7 +175,7 @@ The available flags are as follows, all of which default to `true` except for `s
 | - | - |
 | `no-loading-content` | Controls whether the default slot is rendered while any API caller is loading (i.e. when  `caller.isLoading === true`). |
 | `no-error-content` | Controls whether the default slot is rendered while any API Caller is in an error state (i.e. when  `caller.wasSuccessful === false`). |
-| `no-initial-content` | Controls whether the default slot is rendered while any API Caller has yet to receive a response for the first time (i.e. when `caller.wasSuccessful === null`). |
+| `no-initial-content` | Controls whether the default slot is rendered while any API Caller has yet to receive a successful response for the first time. |
 | `no-progress` | Master toggle for whether the progress indicator is shown in any scenario. |
 | `no-initial-progress` | Controls whether the progress indicator is shown when an API Caller is loading for the very first time (i.e. when  `caller.wasSuccessful === null`). |
 | `no-secondary-progress` | Controls whether the progress indicator is shown when an API Caller is loading any time after its first invocation (i.e. when  `caller.wasSuccessful !== null`). |

src/coalesce-vue-vuetify3/src/components/display/c-loader-status.spec.tsx

@@ -1,4 +1,4 @@
-import { mountApp } from "@test/util";
+import { mountApp, mockEndpoint, flushPromises } from "@test/util";
 import CLS from "./c-loader-status.vue";
 import { ComplexModelViewModel } from "@test-targets/viewmodels.g";
 
@@ -144,4 +144,62 @@ describe("CLoaderStatus", () => {
     // Verify the default "Success" message is displayed
     expect(wrapper.text()).toContain("Success");
   });
+
+  test("void-returning endpoint with no-initial-content shows content after success then failure", async () => {
+    // This tests the fix for void-returning endpoints where hasResult should be true
+    // when the endpoint succeeds, even though result is null.
+    const vm = new ComplexModelViewModel();
+    vm.$primaryKey = 1;
+    const voidCaller = vm.methodWithOptionalEnumParam;
+
+    const mockSuccess = mockEndpoint(
+      vm.$metadata.methods.methodWithOptionalEnumParam,
+      () => ({
+        wasSuccessful: true,
+        // Void endpoints don't have an 'object' property in the response
+      }),
+    );
+
+    const wrapper = mountApp(() => (
+      <CLS loaders={voidCaller} no-initial-content>
+        <div>Content</div>
+      </CLS>
+    ));
+
+    // Initially, content should be hidden (wasSuccessful is null)
+    expect(wrapper.text()).not.toContain("Content");
+
+    // Call the void endpoint successfully
+    await voidCaller();
+    await flushPromises();
+
+    // After success, content should be visible
+    expect(voidCaller.wasSuccessful).toBe(true);
+    expect(voidCaller.result).toBeNull();
+    expect(voidCaller._hasLoaded.value).toBe(true);
+    expect(wrapper.text()).toContain("Content");
+
+    mockSuccess.destroy();
+
+    // Now mock a failure
+    const mockFailure = mockEndpoint(
+      vm.$metadata.methods.methodWithOptionalEnumParam,
+      () => ({
+        wasSuccessful: false,
+        message: "Error occurred",
+      }),
+    );
+
+    // Call the endpoint again, this time it fails
+    await expect(voidCaller()).rejects.toThrow();
+    await flushPromises();
+
+    // Content should still be visible because hasLoaded is true
+    // (the endpoint has successfully loaded before, even though this call failed)
+    expect(voidCaller.wasSuccessful).toBe(false);
+    expect(voidCaller._hasLoaded.value).toBe(true);
+    expect(wrapper.text()).toContain("Content");
+
+    mockFailure.destroy();
+  });
 });

src/coalesce-vue-vuetify3/src/components/display/c-loader-status.vue

@@ -341,10 +341,7 @@ const showContent = computed(() => {
       // initial content is off, and either:
       !flags["initial-content"] &&
       // loader has not yet loaded
-      (loader.wasSuccessful == null ||
-        // or loader has loaded, but it errored and there's no current result
-        // (implying it has never successfully loaded).
-        (loader.wasSuccessful === false && !loader.hasResult))
+      !loader._hasLoaded.value
     ) {
       return false;
     }

src/coalesce-vue/src/api-client.ts

@@ -1394,12 +1394,26 @@ export abstract class ApiState<
     this.__isLoading.value = v;
   }
 
+  /**
+   * @internal
+   * Whether the endpoint has ever successfully loaded.
+   * This is internal state because we don't want to confuse users into using it incorrectly
+   * (it's somewhat similar to wasSuccessful and hasResult)
+   * Could expose if there's a compelling argument for doing so.
+   */
+  _hasLoaded = ref(false);
+
   private readonly __wasSuccessful = ref<boolean | null>(null);
   /** True if the previous request was successful. */
   get wasSuccessful() {
     return this.__wasSuccessful.value;
   }
   set wasSuccessful(v) {
+    if (v === null) {
+      this._hasLoaded.value = false;
+    } else if (v) {
+      this._hasLoaded.value = true;
+    }
     this.__wasSuccessful.value = v;
   }