Merge branch 'performance' into 'main'

Performance improvements See merge request framasoft/mobilizon!1276
2022-10-05 12:13:09 +00:00
parent ec9342744f 456e987af8
commit 1a9aef00e5
25 changed files with 75 additions and 206 deletions
--- a/js/src/components/Account/ActorCard.vue
+++ b/js/src/components/Account/ActorCard.vue
@@ -11,6 +11,7 @@
          alt=""
          width="48"
          height="48"
+          loading="lazy"
        />
      </figure>
      <AccountCircle
--- a/js/src/components/Account/ActorInline.vue
+++ b/js/src/components/Account/ActorInline.vue
@@ -10,6 +10,7 @@
          alt=""
          width="36"
          height="36"
+          loading="lazy"
        />
      </figure>
      <AccountCircle :size="36" v-else />
--- a/js/src/components/Categories/CategoryCard.vue
+++ b/js/src/components/Categories/CategoryCard.vue
@@ -29,6 +29,7 @@
        width="384"
        height="384"
        alt=""
+        loading="lazy"
      />
    </picture>
    <p
--- a/js/src/components/Event/EventCard.vue
+++ b/js/src/components/Event/EventCard.vue
@@ -83,6 +83,7 @@
                  alt=""
                  width="24"
                  height="24"
+                  loading="lazy"
                />
              </figure>
              <account-circle v-else />
--- a/js/src/components/Event/EventMap.vue
+++ b/js/src/components/Event/EventMap.vue
@@ -70,7 +70,7 @@
 <script lang="ts" setup>
 import { Address, IAddress } from "@/types/address.model";
 import { RoutingTransportationType, RoutingType } from "@/types/enums";
-import { computed } from "vue";
+import { computed, defineAsyncComponent } from "vue";

 const RoutingParamType = {
  [RoutingType.OPENSTREETMAP]: {
@@ -87,7 +87,9 @@ const RoutingParamType = {
  },
 };

-const MapLeaflet = import("@/components/LeafletMap.vue");
+const MapLeaflet = defineAsyncComponent(
+  () => import("@/components/LeafletMap.vue")
+);

 const props = defineProps<{
  address: IAddress;
--- a/js/src/components/Event/EventParticipationCard.vue
+++ b/js/src/components/Event/EventParticipationCard.vue
@@ -482,18 +482,10 @@ const lastSeatsLeft = computed<boolean>(() => {
 const actorAvatarURL = computed<string | null>(() =>
  organizerAvatarUrl(props.participation.event)
 );
-
-// export default class EventParticipationCard extends mixins(
-//   ActorMixin,
-//   EventMixin
-// ) {
-
-// }
 </script>

 <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
-// @import "node_modules/bulma/sass/utilities/mixins.sass";

 article.box {
  // div.tag-container {
--- a/js/src/components/Home/SearchFields.vue
+++ b/js/src/components/Home/SearchFields.vue
@@ -37,12 +37,15 @@
 <script lang="ts" setup>
 import { IAddress } from "@/types/address.model";
 import { AddressSearchType } from "@/types/enums";
-import { computed } from "vue";
+import { computed, defineAsyncComponent } from "vue";
 import { useI18n } from "vue-i18n";
-import FullAddressAutoComplete from "@/components/Event/FullAddressAutoComplete.vue";
 import { useRouter } from "vue-router";
 import RouteName from "@/router/name";

+const FullAddressAutoComplete = defineAsyncComponent(
+  () => import("@/components/Event/FullAddressAutoComplete.vue")
+);
+
 const props = defineProps<{
  location: IAddress | null;
  locationDefaultText?: string | null;
--- a/js/src/components/Image/test.html
+++ b/js/src/components/Image/test.html
@@ -1,67 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <!-- Required meta tags -->
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-
-    <!-- Tailwind CSS -->
-    <link
-      href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
-      rel="stylesheet"
-    />
-
-    <title>Tailwind CSS CDN</title>
-  </head>
-  <body>
-    <div class="p-10">
-      <!--Card 1-->
-      <div class="w-full lg:max-w-full lg:flex">
-        <div
-          class="h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden"
-          style="
-            background-image: url('https://mobilizon.fr/media/70e930f488788afdf5d024be5ac2f9c9f0e1b166e16f645beb2c344cdcc65d62.jpg?name=musiquesurnantesbanner.jpg');
-          "
-          title="Mountain"
-        ></div>
-        <div
-          class="border-r border-b border-l border-gray-400 lg:border-l-0 lg:border-t lg:border-gray-400 bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal"
-        >
-          <div class="mb-8">
-            <p class="text-sm text-gray-600 flex items-center">
-              <svg
-                class="fill-current text-gray-500 w-3 h-3 mr-2"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 20 20"
-              >
-                <path
-                  d="M4 8V6a6 6 0 1 1 12 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h1zm5 6.73V17h2v-2.27a2 2 0 1 0-2 0zM7 6v2h6V6a3 3 0 0 0-6 0z"
-                />
-              </svg>
-              Members only
-            </p>
-            <div class="text-gray-900 font-bold text-xl mb-2">
-              Best Mountain Trails 2020
-            </div>
-            <p class="text-gray-700 text-base">
-              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-              Voluptatibus quia, Nonea! Maiores et perferendis eaque,
-              exercitationem praesentium nihil.
-            </p>
-          </div>
-          <div class="flex items-center">
-            <img
-              class="w-10 h-10 rounded-full mr-4"
-              src="/ben.png"
-              alt="Avatar of Writer"
-            />
-            <div class="text-sm">
-              <p class="text-gray-900 leading-none">John Smith</p>
-              <p class="text-gray-600">Aug 18</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </body>
-</html>
--- a/js/src/components/Local/MoreContent.vue
+++ b/js/src/components/Local/MoreContent.vue
@@ -10,6 +10,7 @@
        :src="picture.url"
        width="350"
        alt=""
+        loading="lazy"
      />
      <div class="absolute top-0 left-0 h-full w-full">
        <div
--- a/js/src/components/NavBar.vue
+++ b/js/src/components/NavBar.vue
@@ -24,6 +24,7 @@
                  :src="currentActor?.avatar.url"
                  width="32"
                  height="32"
+                  loading="lazy"
                />
              </figure>
              <AccountCircle v-else :size="32" />
--- a/js/src/services/EventMetadata.ts
+++ b/js/src/services/EventMetadata.ts
@@ -60,9 +60,7 @@ export const eventMetaDataList: IEventMetadataDescription[] = [
    icon: "smoking-off",
    key: "mz:accessibility:smokeFree",
    label: t("Smoke free") as string,
-    description: t(
-      "Whether smoking is prohibited during the event"
-    ) as string,
+    description: t("Whether smoking is prohibited during the event") as string,
    value: "false",
    type: EventMetadataType.BOOLEAN,
    keyType: EventMetadataKeyType.PLAIN,
--- a/js/src/utils/i18n.ts
+++ b/js/src/utils/i18n.ts
@@ -3,7 +3,6 @@ import en from "../i18n/en_US.json";
 import langs from "../i18n/langs.json";
 import { getLocaleData } from "./auth";
 import pluralizationRules from "../i18n/pluralRules";
-// import messages from "@intlify/vite-plugin-vue-i18n/messages";

 const DEFAULT_LOCALE = "en_US";

--- a/js/src/views/CategoriesView.vue
+++ b/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 `"
--- a/js/src/views/Event/EditView.vue
+++ b/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: {
--- a/js/src/views/Event/EventView.vue
+++ b/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;
--- a/js/src/views/Event/MyEventsView.vue
+++ b/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" });
--- a/js/src/views/Group/GroupSettings.vue
+++ b/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 {
--- a/js/src/views/HomeView.vue
+++ b/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,
--- a/js/src/views/SearchView.vue
+++ b/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);
--- a/js/src/views/Settings/PreferencesView.vue
+++ b/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();