lighten usercard and statically load post status from to avoid jumps

src/components/draft/draft.js

@@ -2,6 +2,7 @@ import { cloneDeep } from 'lodash'
 import { defineAsyncComponent } from 'vue'
 
 import StatusContent from 'src/components/status_content/status_content.vue'
+import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
 
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
 
@@ -12,16 +13,13 @@ library.add(faPollH)
 
 const Draft = {
   components: {
-    PostStatusForm: defineAsyncComponent(
+    PostStatusForm,
-      () => import('src/components/post_status_form/post_status_form.vue'),
-    ),
     EditStatusForm: defineAsyncComponent(
       () => import('src/components/edit_status_form/edit_status_form.vue'),
     ),
     ConfirmModal: defineAsyncComponent(
       () => import('src/components/confirm_modal/confirm_modal.vue'),
     ),
-
     StatusContent,
     Gallery: defineAsyncComponent(
       () => import( 'src/components/gallery/gallery.vue')

src/components/post_status_modal/post_status_modal.js

@@ -2,14 +2,13 @@ import { get } from 'lodash'
 import { defineAsyncComponent } from 'vue'
 
 import Modal from '../modal/modal.vue'
+import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
 
 import { usePostStatusStore } from 'src/stores/post_status.js'
 
 const PostStatusModal = {
   components: {
-    PostStatusForm: defineAsyncComponent(
+    PostStatusForm,
-      () => import('src/components/post_status_form/post_status_form.vue'),
-    ),
     Modal,
   },
   data() {

src/components/status/status.js

@@ -13,6 +13,7 @@ import UserAvatar from 'src/components/user_avatar/user_avatar.vue'
 import UserLink from 'src/components/user_link/user_link.vue'
 import UserListPopover from 'src/components/user_list_popover/user_list_popover.vue'
 import UserPopover from 'src/components/user_popover/user_popover.vue'
+import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
 import { muteFilterHits } from '../../services/status_parser/status_parser.js'
 import {
   highlightClass,
@@ -115,9 +116,7 @@ const controlledOrUncontrolledSet = (obj, name, val) => {
 const Status = {
   name: 'Status',
   components: {
-    PostStatusForm: defineAsyncComponent(
+    PostStatusForm,
-      () => import('src/components/post_status_form/post_status_form.vue'),
-    ),
     UserAvatar,
     AvatarList,
     Timeago,

src/components/user_card/user_card.js

@@ -5,23 +5,20 @@ import {
   merge,
 } from 'lodash'
 import { mapState } from 'pinia'
+import { defineAsyncComponent } from 'vue'
 
+import AccountActions from 'src/components/account_actions/account_actions.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
-import ColorInput from 'src/components/color_input/color_input.vue'
-import DialogModal from 'src/components/dialog_modal/dialog_modal.vue'
 import EmojiInput from 'src/components/emoji_input/emoji_input.vue'
 import suggestor from 'src/components/emoji_input/suggestor.js'
-import ImageCropper from 'src/components/image_cropper/image_cropper.vue'
 import RichContent from 'src/components/rich_content/rich_content.jsx'
-import UserTimedFilterModal from 'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'
-import AccountActions from '../account_actions/account_actions.vue'
 import FollowButton from '../follow_button/follow_button.vue'
-import ModerationTools from '../moderation_tools/moderation_tools.vue'
 import ProgressButton from '../progress_button/progress_button.vue'
 import RemoteFollow from '../remote_follow/remote_follow.vue'
 import Select from '../select/select.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import UserLink from '../user_link/user_link.vue'
+import ColorInput from 'src/components/color_input/color_input.vue'
 import UserNote from '../user_note/user_note.vue'
 
 import { useEmojiStore } from 'src/stores/emoji.js'
@@ -124,11 +121,15 @@ export default {
     },
   },
   components: {
-    DialogModal,
+    DialogModal: defineAsyncComponent(
+      () => import( 'src/components/dialog_modal/dialog_modal.vue'),
+    ),
     UserAvatar,
     Checkbox,
     RemoteFollow,
-    ModerationTools,
+    ModerationTools: defineAsyncComponent(
+      () => import( 'src/components/moderation_tools/moderation_tools.vue'),
+    ),
     AccountActions,
     ProgressButton,
     FollowButton,
@@ -136,10 +137,14 @@ export default {
     RichContent,
     UserLink,
     UserNote,
-    UserTimedFilterModal,
+    UserTimedFilterModal: defineAsyncComponent(
+      () => import( 'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'),
+    ),
     ColorInput,
     EmojiInput,
-    ImageCropper,
+    ImageCropper: defineAsyncComponent(
+      () => import( 'src/components/image_cropper/image_cropper.vue'),
+    ),
   },
   data() {
     const user = this.$store.getters.findUser(this.userId)

src/components/user_panel/user_panel.js

@@ -1,5 +1,7 @@
 import { defineAsyncComponent } from 'vue'
 import { mapState } from 'vuex'
+import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
+import UserCard from 'src/components/user_card/user_card.vue'
 
 const UserPanel = {
   computed: {
@@ -12,12 +14,8 @@ const UserPanel = {
     AuthForm: defineAsyncComponent(
       () => import('src/components/auth_form/auth_form.js'),
     ),
-    PostStatusForm: defineAsyncComponent(
+    PostStatusForm,
-      () => import('src/components/post_status_form/post_status_form.vue'),
+    UserCard,
-    ),
-    UserCard: defineAsyncComponent(
-      () => import('src/components/user_card/user_card.vue'),
-    ),
   },
 }