docs: add comprehensive status vs asyncStatus guide to queries

[Copilot]

This PR addresses the issue where the documentation lacked sufficient explanation of the difference between status and asyncStatus in Pinia Colada queries.

Problem

The existing documentation only had a brief explanation buried in a collapsible details section, which was insufficient for developers to understand when and how to use each status type effectively. This led to confusion about:

• The difference between data status (status) and async status (asyncStatus)
• When to use each status for different UI patterns
• How to implement "stale while revalidate" patterns
• Best practices for loading states and user experience

Solution

Added a comprehensive new section "Understanding Query Status vs Async Status" to the queries guide that includes:

Clear Conceptual Explanation

• Data Status (status): Represents the state of your data ('pending', 'success', 'error')
• Async Status (asyncStatus): Represents the current fetch operation ('idle', 'loading')

Real-world Scenarios

1. Initial Load: status: 'pending' + asyncStatus: 'loading'
2. Data Available: status: 'success' + asyncStatus: 'idle'
3. Refreshing Existing Data: status: 'success' + asyncStatus: 'loading'
4. Background Refetch: status: 'success' + asyncStatus: 'loading'

Practical Examples

<!-- Show initial loading spinner only when there's no data yet -->
<div v-if="state.status === 'pending'" class="loading-spinner">
  Loading users for the first time...
</div>

<!-- Show data with optional refresh indicator -->
<div v-else-if="state.data">
  <!-- Small loading indicator when refreshing existing data -->
  <div v-if="asyncStatus === 'loading'" class="refresh-indicator">
    🔄 Refreshing...
  </div>
  <!-- Render data here -->
</div>

Advanced Patterns

Added examples showing how to combine both statuses for sophisticated UX patterns, including computed derived states for complex loading scenarios.

Usage Guidelines

Clear recommendations on when to use each status type:

• Use status for data-related decisions (showing data, errors, type narrowing)
• Use asyncStatus for operation-related UI (loading spinners, button states)
• Use both together for advanced UX patterns

Impact

This improvement makes the dual status concept much more accessible to developers, enabling them to build better user experiences with proper loading states and stale-while-revalidate patterns. The section is now prominently placed in the queries guide rather than hidden in a details section.

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[netlify]

✅ Deploy Preview for funny-banoffee-0afb46 ready!

Name	Link
🔨 Latest commit	2e84412
🔍 Latest deploy log	https://app.netlify.com/projects/funny-banoffee-0afb46/deploys/68931cad70320c00083bfcf4
😎 Deploy Preview	https://deploy-preview-359--funny-banoffee-0afb46.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[posva]

This is too verbose and says nothing

[posva]

This section can be fully removed

[posva]

This is just a verbose summary. Remove all redundant info and condense into two or three senyences