How to load a spinner when loading values from child component .spinner is not properly

Question

 <aura:if isTrue="{!and(v.CaseRecord.ProductId!=null,v.CaseRecord.ProductId!='')}">   
        
            <c:COMM_Case_SubCategory aura:id="SubCat" 
                                productId="{!v.CaseRecord.ProductId}"
                                selectedValue="{!v.CaseRecord.Category__c}"  
                                selectedIssueValue="{!v.CaseRecord.Issue__c}"                
                                accountId="{!v.CaseRecord.AccountId}"
                                duplicateCaseId="{!v.duplicateCaseId}" 
                                calledFrom ="{!v.calledFrom}"
                                />              
        
        </aura:if> 

Answer 1

A good practice is to show the loader on the child component itself, as you are loading something in the child component, let's not block the full page, instead show the loader in child component.

<lightning:spinner class="slds-hide" aura:id="Spinner" alternativeText="Loading" size="small" variant="brand" />

Show/Hide loader based on your need in a specific component instead of blocking the page.