Bootstrap dropdown icon on navbar glitch while navigating pages

I had this navbar dropdown code:

<li class="nav-item dropdown">
    <a href="javascript:void(0)" id="btn_login" class="nav-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="en">Log In <i class="fas fa-chevron-down"></i></span>
        <span class="my">Log Masuk <i class="fas fa-chevron-down"></i></span>
    </a>
    <ul id="login_dropdown" class="dropdown-menu dropdown-primary dropdown-menu-right mt-2 shadow-lg animated bounceIn" aria-labelledby="btn_login">
        <li class="px-3 pt-3" style="width: 200px;">
            <!-- Form here -->
        </li>
    </ul>
</li>

And I used this jquery to change the dropdown icon:

$(".dropdown").on("show.bs.dropdown", function() {
    $(this).find(".fas").removeClass("fa-chevron-down").addClass("fa-chevron-up");
}).on("hide.bs.dropdown", function() {
    $(this).find(".fas").removeClass("fa-chevron-up").addClass("fa-chevron-down");
});

Take a look at this screenshot I made (Ignore the switch, I'll fix that later now focus on the chevron icon): Glitching Navbar

As you can see, the icon seems to be absent on page load, making the nav links budged to the right a little bit but when the icon appears, the nav links shift to the right place.

Side notes:

• It seems like the icon loads on every page.
• I am currently using HTML only. Thus, I paste the same navbar on every page but with different link active state.
• I am not considering any iframe or to include the same navbar instance on all pages(yet).
• This happens in CHROMIUM based browser, everytime.
• Only FIREFOX seems fine although it does seems to load at first, but then no problems.