Performance improvements

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/views/CategoriesView.vue

@@ -64,6 +64,7 @@
                     media="(min-width: 300px)"
                   />
                   <img
+                    loading="lazy"
                     class="w-full h-12 w-12 object-cover"
                     :src="`/img/categories/${key.toLowerCase()}.webp`"
                     :srcset="`/img/categories/${key.toLowerCase()}-small.webp `"

js/src/views/Event/EditView.vue

@@ -594,7 +594,6 @@ import { getTimezoneOffset } from "date-fns-tz";
 import PictureUpload from "@/components/PictureUpload.vue";
 import EditorComponent from "@/components/TextEditor.vue";
 import TagInput from "@/components/Event/TagInput.vue";
-import FullAddressAutoComplete from "@/components/Event/FullAddressAutoComplete.vue";
 import EventMetadataList from "@/components/Event/EventMetadataList.vue";
 import {
   NavigationGuardNext,
@@ -656,7 +655,14 @@ import {
   usePersonStatusGroup,
 } from "@/composition/apollo/actor";
 import { useUserSettings } from "@/composition/apollo/user";
-import { computed, inject, onMounted, ref, watch } from "vue";
+import {
+  computed,
+  inject,
+  onMounted,
+  ref,
+  watch,
+  defineAsyncComponent,
+} from "vue";
 import { useFetchEvent } from "@/composition/apollo/event";
 import { useI18n } from "vue-i18n";
 import { useGroup } from "@/composition/apollo/group";
@@ -684,6 +690,10 @@ const { identities } = useCurrentUserIdentities();
 
 const { features } = useFeatures();
 
+const FullAddressAutoComplete = defineAsyncComponent(
+  () => import("@/components/Event/FullAddressAutoComplete.vue")
+);
+
 // apollo: {
 //   config: CONFIG_EDIT_EVENT,
 //   event: {

js/src/views/Event/EventView.vue

@@ -543,7 +543,6 @@ import {
 import Tag from "@/components/TagElement.vue";
 import EventMetadataSidebar from "@/components/Event/EventMetadataSidebar.vue";
 import EventBanner from "@/components/Event/EventBanner.vue";
-import EventMap from "@/components/Event/EventMap.vue";
 import PopoverActorCard from "@/components/Account/PopoverActorCard.vue";
 import { IParticipant } from "@/types/participant.model";
 import { ApolloCache, FetchResult } from "@apollo/client/core";
@@ -611,6 +610,9 @@ const IntegrationEtherpad = defineAsyncComponent(
   () => import("@/components/Event/Integrations/EtherpadIntegration.vue")
 );
 /* eslint-enable @typescript-eslint/no-unused-vars */
+const EventMap = defineAsyncComponent(
+  () => import("@/components/Event/EventMap.vue")
+);
 
 const props = defineProps<{
   uuid: string;

js/src/views/Event/MyEventsView.vue

@@ -200,7 +200,6 @@ import RouteName from "@/router/name";
 import { IParticipant } from "../../types/participant.model";
 import { LOGGED_USER_DRAFTS } from "../../graphql/actor";
 import { IEvent } from "../../types/event.model";
-import EventParticipationCard from "../../components/Event/EventParticipationCard.vue";
 import MultiEventMinimalistCard from "../../components/Event/MultiEventMinimalistCard.vue";
 import EventMinimalistCard from "../../components/Event/EventMinimalistCard.vue";
 import {
@@ -208,13 +207,17 @@ import {
   LOGGED_USER_UPCOMING_EVENTS,
 } from "@/graphql/participant";
 import { useQuery } from "@vue/apollo-composable";
-import { computed, inject, ref } from "vue";
+import { computed, inject, ref, defineAsyncComponent } from "vue";
 import { IUser } from "@/types/current-user.model";
 import { booleanTransformer, useRouteQuery } from "vue-use-route-query";
 import { Locale } from "date-fns";
 import { useI18n } from "vue-i18n";
 import { useRestrictions } from "@/composition/apollo/config";
 
+const EventParticipationCard = defineAsyncComponent(
+  () => import("@/components/Event/EventParticipationCard.vue")
+);
+
 type Eventable = IParticipant | IEvent;
 
 const { t } = useI18n({ useScope: "global" });

js/src/views/Group/GroupSettings.vue

@@ -184,7 +184,6 @@
 </template>
 
 <script lang="ts" setup>
-import FullAddressAutoComplete from "@/components/Event/FullAddressAutoComplete.vue";
 import PictureUpload from "@/components/PictureUpload.vue";
 import { GroupVisibility, MemberRole, Openness } from "@/types/enums";
 import { IGroup, usernameWithDomain, displayName } from "@/types/actor";
@@ -212,6 +211,10 @@ const Editor = defineAsyncComponent(
   () => import("@/components/TextEditor.vue")
 );
 
+const FullAddressAutoComplete = defineAsyncComponent(
+  () => import("@/components/Event/FullAddressAutoComplete.vue")
+);
+
 const props = defineProps<{ preferredUsername: string }>();
 
 const { currentActor } = useCurrentActorClient();
@@ -263,7 +266,7 @@ onGroupResult(({ data }) => {
 
 watch(
   group,
-  async (newGroup: IGroup, oldGroup: IGroup) => {
+  async (newGroup: IGroup | undefined, oldGroup: IGroup | undefined) => {
     console.debug("watching group");
     if (!newGroup) return;
     try {

js/src/views/HomeView.vue

@@ -175,7 +175,6 @@
 <script lang="ts" setup>
 import { ParticipantRole } from "@/types/enums";
 import { IParticipant } from "../types/participant.model";
-import EventParticipationCard from "../components/Event/EventParticipationCard.vue";
 import MultiCard from "../components/Event/MultiCard.vue";
 import { CURRENT_ACTOR_CLIENT } from "../graphql/actor";
 import { IPerson, displayName } from "../types/actor";
@@ -189,7 +188,14 @@ import CloseEvents from "@/components/Local/CloseEvents.vue";
 import CloseGroups from "@/components/Local/CloseGroups.vue";
 import LastEvents from "@/components/Local/LastEvents.vue";
 import OnlineEvents from "@/components/Local/OnlineEvents.vue";
-import { computed, onMounted, reactive, ref, watch } from "vue";
+import {
+  computed,
+  onMounted,
+  reactive,
+  ref,
+  watch,
+  defineAsyncComponent,
+} from "vue";
 import { useMutation, useQuery } from "@vue/apollo-composable";
 import { useRouter } from "vue-router";
 import { REVERSE_GEOCODE } from "@/graphql/address";
@@ -209,6 +215,10 @@ import { useServerProvidedLocation } from "@/composition/apollo/config";
 import { ABOUT } from "@/graphql/config";
 import { IConfig } from "@/types/config.model";
 
+const EventParticipationCard = defineAsyncComponent(
+  () => import("@/components/Event/EventParticipationCard.vue")
+);
+
 const { result: aboutConfigResult } = useQuery<{
   config: Pick<
     IConfig,

js/src/views/SearchView.vue

@@ -668,7 +668,7 @@ import GroupCard from "@/components/Group/GroupCard.vue";
 import { CURRENT_USER_CLIENT } from "@/graphql/user";
 import { ICurrentUser } from "@/types/current-user.model";
 import { useQuery } from "@vue/apollo-composable";
-import { computed, inject, ref, watch } from "vue";
+import { computed, defineAsyncComponent, inject, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import {
   floatTransformer,
@@ -698,9 +698,12 @@ import { refDebounced } from "@vueuse/core";
 import { IAddress } from "@/types/address.model";
 import { IConfig } from "@/types/config.model";
 import { TypeNamed } from "@/types/apollo";
-import EventMarkerMap from "@/components/Search/EventMarkerMap.vue";
 import { LatLngBounds } from "leaflet";
 
+const EventMarkerMap = defineAsyncComponent(
+  () => import("@/components/Search/EventMarkerMap.vue")
+);
+
 const search = useRouteQuery("search", "");
 const searchDebounced = refDebounced(search, 1000);
 const locationName = useRouteQuery("locationName", null);

js/src/views/Settings/PreferencesView.vue

@@ -116,16 +116,19 @@ import {
 } from "../../graphql/user";
 import langs from "../../i18n/langs.json";
 import RouteName from "../../router/name";
-import FullAddressAutoComplete from "@/components/Event/FullAddressAutoComplete.vue";
 import { AddressSearchType } from "@/types/enums";
 import { Address, IAddress } from "@/types/address.model";
 import { useTimezones } from "@/composition/apollo/config";
 import { useUserSettings } from "@/composition/apollo/user";
 import { useHead } from "@vueuse/head";
-import { computed } from "vue";
+import { computed, defineAsyncComponent } from "vue";
 import { useI18n } from "vue-i18n";
 import { useMutation } from "@vue/apollo-composable";
 
+const FullAddressAutoComplete = defineAsyncComponent(
+  () => import("@/components/Event/FullAddressAutoComplete.vue")
+);
+
 const { timezones: serverTimezones, loading: loadingTimezones } =
   useTimezones();
 const { loggedUser, loading: loadingUserSettings } = useUserSettings();