Lightning component not being displayed in home flexipage

Question

I'm working with a testing org and I have put one of my lightning components inside home flexipage. The point is my code is running (cause I put logs in js) but it's not displaying anything.

Extended component (PA_HelperComponent) is just for helper methods (error toast generation)

Component

<aura:component implements="flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes" 
                extends="c:PA_HelperComponent" controller="PA_ListViewControl">
<aura:attribute name="listviewMAP" type="List"/>

<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

<aura:iteration items="{!v.listviewMAP}" var="item">
    <lightning:layout>
        <aura:iteration var="lst" items="{!item}">
            <lightning:layoutItem class="slds-size--1-of-1 slds-p-around_xx-small">
                <c:PA_ListViewCounter listviewID="{!lst.listviewID}" listviewName="{!lst.listviewName}" sObjectName="{!lst.objectType}"/>
            </lightning:layoutItem>
        </aura:iteration>
    </lightning:layout>
</aura:iteration>

Controller JS

({
doInit : function(component, event, helper) {
    var params;
    var result;
    var errorMessage;
    var listviewMAP = [];
    var action = component.get("c.retrieveListViewAPINames");
    action.setCallback(this, function(response){
        if(response.getState() === 'SUCCESS'){
            result = response.getReturnValue();
            for(var i in result){
                listviewMAP.push(result[i]);
            }
            component.set("v.listviewMAP", listviewMAP);
            console.log('lstvmap', JSON.stringify(component.get("v.listviewMAP")));
        }
        else{
            errorMessage = helper.getErrorMessage(response.getError()[0]);
            params = {"title":"Error","message":errorMessage,"type":"error","duration":5000};
            helper.generateToast(params);
        }
    });
    $A.enqueueAction(action);
  }
})

---

PA_ListViewCounter Component

<aura:component implements="flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes" extends="c:PA_HelperComponent" controller="PA_ListViewControl" access="global">
<aura:attribute name="listviewID" type="String"/>
<aura:attribute name="listviewName" type="String"/>
<aura:attribute name="sObjectName" type="String"/>
<aura:attribute name="counter" type="Integer"/>
<aura:attribute name="isLoading" type="Boolean" default="true"/>

<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

<div class="pa-background">
    <a data-rec="{!v.listviewID}" class="pa-title" onclick="{!c.redirectToListView}">
        <div class="pa-list-view-title">{!v.listviewName}</div> 
        <aura:if isTrue="{!v.isLoading}">
            <div class="slds-is-relative slds-m-top_x-large">
                <lightning:spinner size="medium" variant="brand"/>
            </div>
            <aura:set attribute="else">
                <div class="pa-list-view-count" style="color:#1b5297">{!v.counter}</div>
            </aura:set>
        </aura:if>
    </a>
</div>

PA_ListViewCounter Controller JS

({
doInit : function(component, event, helper) {
    var params;
    var result;
    var errorMessage;
    var action = component.get("c.listviewInfoForCounter");
    action.setParams({
        "listviewId" : component.get("v.listviewID"),
        "sObjectName" : component.get("v.sObjectName")
    });
    action.setCallback(this, function(response){
        if(response.getState() === 'SUCCESS'){
            result = response.getReturnValue();
            component.set("v.counter", result);
            console.log(result);
            component.set("v.isLoading", false);
        }
        else{
            errorMessage = helper.getErrorMessage(response.getError()[0]);
            params = {"title":"Error","message":errorMessage,"type":"error","duration":5000};
            helper.generateToast(params);
        }
    });
    $A.enqueueAction(action);
},

redirectToListView: function(component, event, helper) {
    var currentTarget = event.currentTarget.getAttribute("data-rec");
    var navEvent = $A.get("e.force:navigateToList");
    navEvent.setParams({
        "listViewId" : currentTarget,
        "listViewName" : null,
        "scope" : component.get("v.sObjectName")
    });
    navEvent.fire();
  }
})

---

PA_HelperComponent Component

<aura:component extensible="true"
                implements="flexipage:availableForAllPageTypes, 
                            forceCommunity:availableForAllPageTypes"> 
</aura:component> 

PA_HelperComponent Helper JS

({ 
   generateToast : function(params) { 
       var showToast = $A.get("e.force:showToast"); 
       showToast.setParams(params); showToast.fire(); 
   }, 
 })

Answer 1

You seem to be missing the {!v.body} expression in the parent component PA_HelperComponent. Because you are inheriting the component, the body rendered in the child component needs to be passed into the parent component so that it is rendered. Take a look at the documentation for details.

The default renderer for a component iterates through its body attribute, renders everything, and passes the rendered data to its super component. The super component can output the data passed to it by including {!v.body} in its markup. If there is no super component, you've hit the root component and the data is inserted into document.body.

Your PA_HelperComponent should look like:

<aura:component extensible="true" implements="flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes"> 
    {!v.body}
</aura:component>