Wishlist .counter.qty loads before page is fully loaded (frontend development help)

Hi, I’m trying to make the wishlist the same as the minicart with an icon and the counter qty. Therefore I override Magento_Wishlist/templates/link.phtml like so:

<div class="mywishlist-wrapper link wishlist" data-bind="scope: 'wishlist'"> <a <?= /* @noEscape */ $block->getLinkAttributes() ?> class="mywishlist"> <!-- ko if: wishlist().counter --> <span data-bind="text: wishlist().items.length" class="counter qty"></span> <!-- /ko --> </a> 

</div>

.mywishlist has an iconfont and everything is looking good. The only problem is, the css for the .counter.qty loads together with page load, so I have a orange circle and only after a few milliseconds the actual number of items loads.

I’m looking for the same behavior as in the minicart .counter.qty where the complete css and the number loads together after the page is fully loaded.

Any way to achieve this for the wishlist? I guess it has to di with knockout js which I’m awful in. Thanks