Use x-clock on user-menu popover to hide it during initial load (#3997)

Also, use `ms-2` on the admin icon margin

Update html for better git diff and readability, linebreak on each
property

hypha/templates/includes/user_menu.html

@@ -2,33 +2,69 @@
 
 {% if request.user.is_authenticated %}
     <div x-data="{ show: false }" class="relative flex">
-        <button x-on:click="show = ! show" class="font-bold flex items-center ps-1 pe-4 hover:bg-black hover:text-white transition-colors rounded-sm" type="button">
+        <button
+            x-on:click="show = ! show"
+            class="font-bold flex items-center ps-1 pe-4 hover:bg-black hover:text-white transition-colors rounded-sm"
+            type="button"
+        >
             {% heroicon_micro "user-circle" class="inline align-text-bottom w-8 h-8 me-1" aria_hidden=true %}
             <span>{{ request.user }}</span>
         </button>
-        <div x-show="show" x-transition @click.outside="show = false" class="min-w-40 absolute block bg-white shadow-xl z-20 border-y rounded-sm end-0 top-10">
-            <a href="{% url 'users:account' %}" title="Goto your account" class="pr-4 py-3 block text-black pl-3
-                                                                                 focus-visible:outline-dashed outline-1 transition-colors border-r
-                                                                                 hover:bg-slate-100 hover:text-dark-blue hover:font-semibold">
-                {% trans 'My account' %}</a>
+        <div
+            x-cloak
+            x-show="show"
+            x-transition
+            @click.outside="show = false"
+            class="min-w-36 absolute block bg-white shadow-xl z-20 border-y rounded-sm end-0 top-10"
+        >
+            <a
+                href="{% url 'users:account' %}"
+                title="Goto your account"
+                class="pe-4 py-3 block text-black ps-3
+                       focus-visible:outline-dashed outline-1 transition-colors border-r
+                       hover:bg-slate-100 hover:text-dark-blue hover:font-semibold"
+            >
+                {% trans 'My account' %}
+            </a>
             {% if request.user.is_apply_staff %}
-                <a href="{% url 'activity:notifications' %}" title="Check latest notifications" class="pr-4 py-3 block text-black pl-3
-                                                                                                       focus-visible:outline-dashed outline-1 transition-colors border-r
-                                                                                                       hover:bg-slate-100 hover:text-dark-blue hover:font-semibold">
-                    {% trans "Activity feed" %}</a>
-                <a href="{% url "apply:submissions:list-alt" %}?query=flagged:@me" title="Goto your flagged submissions" class="pr-4 py-3 block text-black pl-3
-                                                                                                                                focus-visible:outline-dashed outline-1 transition-colors border-r
-                                                                                                                                hover:bg-slate-100 hover:text-dark-blue hover:font-semibold">
-                    {% trans "My flagged" %}</a>
-                <a href="{% url 'wagtailadmin_home' %}" title="Goto wagtail admin" class="pr-4 py-3 block text-black pl-3
-                                                                                          focus-visible:outline-dashed outline-1 transition-colors border-r
-                                                                                          hover:bg-slate-100 hover:text-dark-blue hover:font-semibold">
-                    {% trans "Admin" %}{% heroicon_micro "wrench-screwdriver" class="ml-2 inline align-text-bottom" %}</a>
+                <a
+                    href="{% url 'activity:notifications' %}"
+                    title="Check latest notifications"
+                    class="pr-4 py-3 block text-black pl-3
+                           focus-visible:outline-dashed outline-1 transition-colors border-r
+                           hover:bg-slate-100 hover:text-dark-blue hover:font-semibold"
+                >
+                    {% trans "Activity feed" %}
+                </a>
+                <a
+                    href="{% url "apply:submissions:list-alt" %}?query=flagged:@me"
+                    title="Goto your flagged submissions"
+                    class="pr-4 py-3 block text-black pl-3
+                           focus-visible:outline-dashed outline-1 transition-colors border-r
+                           hover:bg-slate-100 hover:text-dark-blue hover:font-semibold"
+                >
+                    {% trans "My flagged" %}
+                </a>
+                <a
+                    href="{% url 'wagtailadmin_home' %}"
+                    title="Goto wagtail admin"
+                    class="pr-4 py-3 block text-black pl-3
+                           focus-visible:outline-dashed outline-1 transition-colors border-r
+                           hover:bg-slate-100 hover:text-dark-blue hover:font-semibold"
+                >
+                    {% trans "Admin" %}
+                    {% heroicon_micro "wrench-screwdriver" class="ms-2 inline align-text-bottom" %}
+                </a>
             {% endif %}
-            <a href="{% url 'users:logout' %}" title="Log out" class="pr-4 py-3 block text-black pl-3 focus-visible:outline-dashed
-                                                                      outline-1 transition-colors border-r
-                                                                      hover:bg-slate-100 hover:text-dark-blue hover:font-semibold">
-                {% trans "Log out" %}</a>
+            <a
+                href="{% url 'users:logout' %}"
+                title="Log out"
+                class="pr-4 py-3 block text-black pl-3 focus-visible:outline-dashed
+                       outline-1 transition-colors border-r
+                       hover:bg-slate-100 hover:text-dark-blue hover:font-semibold"
+            >
+                {% trans "Log out" %}
+            </a>
         </div>
     </div>
 {% else %}