Issue in @if and @empty block

[hard thicket]

    @for(page of pageData; track page.title){
        <tr>
            <td>{{page.title}}</td>
            <td>{{page.author}}</td>
            <td>{{page.status}}</td>
            <td>{{page.visibility}}</td>
            <td><img src="{{baseUrl}}/{{page.featured_image}}" width="50" height="50"></td>
        </tr>
    } @empty{
        <h3>No data found</h3>
    }
} @loading {
    <div class="loading">Loading...</div>
}```

on page load i am not getting data and h3 renders with No data found

how to avoid that loading

[pliant basin]

@deferis about component loading, not data loading.
About @empty it doesn't work well with async data loading.
You should use a loading state to display the h3 only after the data is retrieved AND empty.

BTW your content is filtered because you are swearing.