Hello everyone

I want to condtionally render a part of a LWC template. I have this in the template

<template if:true={areDetailsVisible}>
                        <div class="item" onclick={comingSoonAlert} style={bgAppointments}>
                            <div class="item_picto"><img src={iconAppointments} /></div>
                            <div class="item_title">{label.my_appointments}</div>
                        </div>
                    </template>

The issue is that the 'areDetailsVisible' visible variable is set based on a value in a record, which I retrieve in the connectedCallback:
areDetailsVisible = false;

connectedCallback() {
        console.log('connected callback');
        getUserContext({})
            .then(result => {
                console.log(result)
                getCommunitySetting({market:result.cli_Market__c})
                    .then(commSet=>{
                        console.log(commSet)
                        var setting = JSON.parse(commSet);
                        console.log(setting)
                        this.areDetailsVisible = false//setting.cli_Editable_Customer__c;
                    })
                    .catch()
            }).catch()
    }

But now the value is first undefined ( false ) so the template is not rendered, but when it is set to true it is and it just shows and is not very UI friendly.

Can I somehow wait for the value from the callback and render after.