From 456e987af8502b33a063141354cc2b8027715389 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Wed, 5 Oct 2022 12:13:19 +0200
Subject: [PATCH] Performance improvements

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/package.json                               |  1 -
 js/src/components/Account/ActorCard.vue       |  1 +
 js/src/components/Account/ActorInline.vue     |  1 +
 js/src/components/Categories/CategoryCard.vue |  1 +
 js/src/components/Event/EventCard.vue         |  1 +
 js/src/components/Event/EventMap.vue          |  6 +-
 .../Event/EventParticipationCard.vue          |  8 --
 js/src/components/Home/SearchFields.vue       |  7 +-
 js/src/components/Image/test.html             | 67 -------------
 js/src/components/Local/MoreContent.vue       |  1 +
 js/src/components/NavBar.vue                  |  1 +
 js/src/services/EventMetadata.ts              |  4 +-
 js/src/utils/i18n.ts                          |  1 -
 js/src/views/CategoriesView.vue               |  1 +
 js/src/views/Event/EditView.vue               | 14 ++-
 js/src/views/Event/EventView.vue              |  4 +-
 js/src/views/Event/MyEventsView.vue           |  7 +-
 js/src/views/Group/GroupSettings.vue          |  7 +-
 js/src/views/HomeView.vue                     | 14 ++-
 js/src/views/SearchView.vue                   |  7 +-
 js/src/views/Settings/PreferencesView.vue     |  7 +-
 js/tsconfig.json                              |  7 +-
 js/vite.config.js                             | 13 +--
 js/yarn.lock                                  | 97 ++-----------------
 lib/web/templates/page/index.html.heex        |  3 +
 25 files changed, 75 insertions(+), 206 deletions(-)
 delete mode 100644 js/src/components/Image/test.html

diff --git a/js/package.json b/js/package.json
index 55113d70b..2ab633f1e 100644
--- a/js/package.json
+++ b/js/package.json
@@ -94,7 +94,6 @@
   },
   "devDependencies": {
     "@histoire/plugin-vue": "^0.10.0",
-    "@intlify/vite-plugin-vue-i18n": "^6.0.0",
     "@playwright/test": "^1.25.1",
     "@rushstack/eslint-patch": "^1.1.4",
     "@tailwindcss/forms": "^0.5.2",
diff --git a/js/src/components/Account/ActorCard.vue b/js/src/components/Account/ActorCard.vue
index 4ae3e256f..8ca1d5152 100644
--- 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
diff --git a/js/src/components/Account/ActorInline.vue b/js/src/components/Account/ActorInline.vue
index a6e712a84..3c64c024d 100644
--- 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 />
diff --git a/js/src/components/Categories/CategoryCard.vue b/js/src/components/Categories/CategoryCard.vue
index 1c3e5c6df..d030ed88f 100644
--- 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
diff --git a/js/src/components/Event/EventCard.vue b/js/src/components/Event/EventCard.vue
index 8b14a2a8a..65bd8f681 100644
--- 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 />
diff --git a/js/src/components/Event/EventMap.vue b/js/src/components/Event/EventMap.vue
index 0a3d050b9..f68111bfd 100644
--- 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;
diff --git a/js/src/components/Event/EventParticipationCard.vue b/js/src/components/Event/EventParticipationCard.vue
index d6b75bfc1..2f06d483a 100644
--- 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 {
diff --git a/js/src/components/Home/SearchFields.vue b/js/src/components/Home/SearchFields.vue
index 5a0c005cb..9107af2a5 100644
--- 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;
diff --git a/js/src/components/Image/test.html b/js/src/components/Image/test.html
deleted file mode 100644
index 6d63a3297..000000000
--- a/js/src/components/Image/test.html
+++ /dev/null
@@ -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>
diff --git a/js/src/components/Local/MoreContent.vue b/js/src/components/Local/MoreContent.vue
index 734e892a5..3f4605879 100644
--- 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
diff --git a/js/src/components/NavBar.vue b/js/src/components/NavBar.vue
index 73752e447..70b64a8cd 100644
--- 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" />
diff --git a/js/src/services/EventMetadata.ts b/js/src/services/EventMetadata.ts
index 4d8d5981b..320b4ee04 100644
--- 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,
diff --git a/js/src/utils/i18n.ts b/js/src/utils/i18n.ts
index c2a7030f5..a8729e7b0 100644
--- 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";
 
diff --git a/js/src/views/CategoriesView.vue b/js/src/views/CategoriesView.vue
index 97de3f25d..e058d6182 100644
--- 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 `"
diff --git a/js/src/views/Event/EditView.vue b/js/src/views/Event/EditView.vue
index dccac9f30..1490aeb01 100644
--- 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: {
diff --git a/js/src/views/Event/EventView.vue b/js/src/views/Event/EventView.vue
index 3eea67d32..539f79cc0 100755
--- 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;
diff --git a/js/src/views/Event/MyEventsView.vue b/js/src/views/Event/MyEventsView.vue
index 537aaa189..ef1ab3295 100644
--- 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" });
diff --git a/js/src/views/Group/GroupSettings.vue b/js/src/views/Group/GroupSettings.vue
index d1590f87b..7c4a4ef87 100644
--- 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 {
diff --git a/js/src/views/HomeView.vue b/js/src/views/HomeView.vue
index 2aeee3e2d..9dbacceeb 100644
--- 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,
diff --git a/js/src/views/SearchView.vue b/js/src/views/SearchView.vue
index 2fc01b6c5..9ee3600ae 100644
--- 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);
diff --git a/js/src/views/Settings/PreferencesView.vue b/js/src/views/Settings/PreferencesView.vue
index e4eaf9013..b7df8d0b6 100644
--- 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();
diff --git a/js/tsconfig.json b/js/tsconfig.json
index 84839b8f1..a8f27a55f 100644
--- a/js/tsconfig.json
+++ b/js/tsconfig.json
@@ -14,12 +14,7 @@
     "isolatedModules": true,
     "sourceMap": true,
     "baseUrl": ".",
-    "types": [
-      "webpack-env",
-      "jest",
-      "vite/client",
-      "@intlify/vite-plugin-vue-i18n/client"
-    ],
+    "types": ["webpack-env", "jest", "vite/client"],
     "typeRoots": ["./@types", "./node_modules/@types"],
     "paths": {
       "@/*": ["src/*"]
diff --git a/js/vite.config.js b/js/vite.config.js
index 96a88d348..6deb53055 100644
--- a/js/vite.config.js
+++ b/js/vite.config.js
@@ -3,9 +3,6 @@ import { defineConfig } from "vite";
 import path from "path";
 import { VitePWA } from "vite-plugin-pwa";
 import { visualizer } from "rollup-plugin-visualizer";
-// import { resolve, dirname } from "node:path";
-// import { fileURLToPath } from "url";
-// import vueI18n from "@intlify/vite-plugin-vue-i18n";
 
 export default defineConfig(({ command }) => {
   const isDev = command !== "build";
@@ -31,21 +28,13 @@ export default defineConfig(({ command }) => {
         //   enabled: true,
         // },
       }),
-      // vueI18n({
-      //   /* options */
-      //   // locale messages resource pre-compile option
-      //   include: resolve(
-      //     dirname(fileURLToPath(import.meta.url)),
-      //     "./src/i18n/**"
-      //   ),
-      // }),
       visualizer(),
     ],
     build: {
       manifest: true,
       outDir: path.resolve(__dirname, "../priv/static"),
       emptyOutDir: true,
-      sourcemap: isDev,
+      sourcemap: true,
       rollupOptions: {
         // overwrite default .html entry
         input: {
diff --git a/js/yarn.lock b/js/yarn.lock
index b2fe6955b..5bba169db 100644
--- a/js/yarn.lock
+++ b/js/yarn.lock
@@ -1082,17 +1082,6 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
-"@intlify/bundle-utils@^3.2.1":
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/@intlify/bundle-utils/-/bundle-utils-3.2.1.tgz#f1a00fb31716567c8da63fbb351c3199ca12d467"
-  integrity sha512-rf4cLBOnbqmpXVcCdcYHilZpMt1m82syh3WLBJlZvGxN2KkH9HeHVH4+bnibF/SDXCHNh6lM6wTpS/qw+PkcMg==
-  dependencies:
-    "@intlify/message-compiler" next
-    "@intlify/shared" next
-    jsonc-eslint-parser "^1.0.1"
-    source-map "0.6.1"
-    yaml-eslint-parser "^0.3.2"
-
 "@intlify/core-base@9.2.2":
   version "9.2.2"
   resolved "https://registry.yarnpkg.com/@intlify/core-base/-/core-base-9.2.2.tgz#5353369b05cc9fe35cab95fe20afeb8a4481f939"
@@ -1118,36 +1107,11 @@
     "@intlify/shared" "9.2.2"
     source-map "0.6.1"
 
-"@intlify/message-compiler@next":
-  version "9.3.0-beta.3"
-  resolved "https://registry.yarnpkg.com/@intlify/message-compiler/-/message-compiler-9.3.0-beta.3.tgz#08eb89cf071dbdcadc861ecb2f2579f8e799445b"
-  integrity sha512-j8OwToBQgs01RBMX4GCDNQfcnmw3AiDG3moKIONTrfXcf+1yt/rWznLTYH/DXbKcFMAFijFpCzMYjUmH1jVFYA==
-  dependencies:
-    "@intlify/shared" "9.3.0-beta.3"
-    source-map "0.6.1"
-
 "@intlify/shared@9.2.2":
   version "9.2.2"
   resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-9.2.2.tgz#5011be9ca2b4ab86f8660739286e2707f9abb4a5"
   integrity sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==
 
-"@intlify/shared@9.3.0-beta.3", "@intlify/shared@next":
-  version "9.3.0-beta.3"
-  resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-9.3.0-beta.3.tgz#fce341eb6abbb6ec5efc8b6847f67050ed5ebaf5"
-  integrity sha512-Z/0TU4GhFKRxKh+0RbwJExik9zz57gXYgxSYaPn7YQdkQ/pabSioCY/SXnYxQHL6HzULF5tmqarFm6glbGqKhw==
-
-"@intlify/vite-plugin-vue-i18n@^6.0.0":
-  version "6.0.3"
-  resolved "https://registry.yarnpkg.com/@intlify/vite-plugin-vue-i18n/-/vite-plugin-vue-i18n-6.0.3.tgz#57a6900de02a9829e52b16bf072768534c7664ef"
-  integrity sha512-6SgNzPAOCR90wvt368lKzi7f/5ZEWJn22UCGvhFsP3XvKqlF3cVzojahgQ6o+LTdCkExeM6wPgd+haFf28E9VQ==
-  dependencies:
-    "@intlify/bundle-utils" "^3.2.1"
-    "@intlify/shared" next
-    "@rollup/pluginutils" "^4.2.0"
-    debug "^4.3.1"
-    fast-glob "^3.2.5"
-    source-map "0.6.1"
-
 "@intlify/vue-devtools@9.2.2":
   version "9.2.2"
   resolved "https://registry.yarnpkg.com/@intlify/vue-devtools/-/vue-devtools-9.2.2.tgz#b95701556daf7ebb3a2d45aa3ae9e6415aed8317"
@@ -1319,14 +1283,6 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
-"@rollup/pluginutils@^4.2.0":
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.2.1.tgz#e6c6c3aba0744edce3fb2074922d3776c0af2a6d"
-  integrity sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==
-  dependencies:
-    estree-walker "^2.0.1"
-    picomatch "^2.2.2"
-
 "@rushstack/eslint-patch@^1.1.4":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz#8be36a1f66f3265389e90b5f9c9962146758f728"
@@ -2146,7 +2102,7 @@ acorn-globals@^6.0.0:
     acorn "^7.1.1"
     acorn-walk "^7.1.1"
 
-acorn-jsx@^5.2.0, acorn-jsx@^5.3.2:
+acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
@@ -2165,7 +2121,7 @@ acorn-walk@^7.0.0, acorn-walk@^7.1.1:
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
   integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
 
-acorn@^7.0.0, acorn@^7.1.1, acorn@^7.4.1:
+acorn@^7.0.0, acorn@^7.1.1:
   version "7.4.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
@@ -2789,7 +2745,7 @@ debug@2.6.9, debug@^2.6.9:
   dependencies:
     ms "2.0.0"
 
-debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
+debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -3266,13 +3222,6 @@ eslint-scope@^7.0.0, eslint-scope@^7.1.1:
     esrecurse "^4.3.0"
     estraverse "^5.2.0"
 
-eslint-utils@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-2.1.0.tgz#d2de5e03424e707dc10c74068ddedae708741b27"
-  integrity sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==
-  dependencies:
-    eslint-visitor-keys "^1.1.0"
-
 eslint-utils@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-3.0.0.tgz#8aebaface7345bb33559db0a1f13a1d2d48c3672"
@@ -3280,11 +3229,6 @@ eslint-utils@^3.0.0:
   dependencies:
     eslint-visitor-keys "^2.0.0"
 
-eslint-visitor-keys@^1.1.0, eslint-visitor-keys@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e"
-  integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==
-
 eslint-visitor-keys@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
@@ -3340,15 +3284,6 @@ eslint@^8.21.0, eslint@^8.7.0:
     strip-json-comments "^3.1.0"
     text-table "^0.2.0"
 
-espree@^6.0.0:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-6.2.1.tgz#77fc72e1fd744a2052c20f38a5b575832e82734a"
-  integrity sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==
-  dependencies:
-    acorn "^7.1.1"
-    acorn-jsx "^5.2.0"
-    eslint-visitor-keys "^1.1.0"
-
 espree@^9.0.0, espree@^9.3.1, espree@^9.4.0:
   version "9.4.0"
   resolved "https://registry.yarnpkg.com/espree/-/espree-9.4.0.tgz#cd4bc3d6e9336c433265fc0aa016fc1aaf182f8a"
@@ -3392,7 +3327,7 @@ estree-walker@^1.0.1:
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-1.0.1.tgz#31bc5d612c96b704106b477e6dd5d8aa138cb700"
   integrity sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==
 
-estree-walker@^2.0.1, estree-walker@^2.0.2:
+estree-walker@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
   integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
@@ -3424,7 +3359,7 @@ fast-diff@^1.1.2:
   resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
   integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
 
-fast-glob@^3.2.11, fast-glob@^3.2.5, fast-glob@^3.2.9:
+fast-glob@^3.2.11, fast-glob@^3.2.9:
   version "3.2.12"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80"
   integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==
@@ -4324,17 +4259,6 @@ json5@^2.2.0, json5@^2.2.1:
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c"
   integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==
 
-jsonc-eslint-parser@^1.0.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/jsonc-eslint-parser/-/jsonc-eslint-parser-1.4.1.tgz#8cbe99f6f5199acbc5a823c4c0b6135411027fa6"
-  integrity sha512-hXBrvsR1rdjmB2kQmUjf1rEIa+TqHBGMge8pwi++C+Si1ad7EjZrJcpgwym+QGK/pqTx+K7keFAtLlVNdLRJOg==
-  dependencies:
-    acorn "^7.4.1"
-    eslint-utils "^2.1.0"
-    eslint-visitor-keys "^1.3.0"
-    espree "^6.0.0"
-    semver "^6.3.0"
-
 jsonc-parser@^3.0.0, jsonc-parser@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-3.2.0.tgz#31ff3f4c2b9793f89c67212627c51c6394f88e76"
@@ -6557,16 +6481,7 @@ yallist@^4.0.0:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
-yaml-eslint-parser@^0.3.2:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/yaml-eslint-parser/-/yaml-eslint-parser-0.3.2.tgz#c7f5f3904f1c06ad55dc7131a731b018426b4898"
-  integrity sha512-32kYO6kJUuZzqte82t4M/gB6/+11WAuHiEnK7FreMo20xsCKPeFH5tDBU7iWxR7zeJpNnMXfJyXwne48D0hGrg==
-  dependencies:
-    eslint-visitor-keys "^1.3.0"
-    lodash "^4.17.20"
-    yaml "^1.10.0"
-
-yaml@^1.10.0, yaml@^1.10.2:
+yaml@^1.10.2:
   version "1.10.2"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
diff --git a/lib/web/templates/page/index.html.heex b/lib/web/templates/page/index.html.heex
index 688ed8cf4..8d35f4a24 100644
--- a/lib/web/templates/page/index.html.heex
+++ b/lib/web/templates/page/index.html.heex
@@ -7,6 +7,9 @@
     <link rel="apple-touch-icon" href="/img/icons/apple-touch-icon-152x152.png" sizes="152x152" />
     <link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color={theme_color()} />
     <meta name="theme-color" content={theme_color()} />
+    <link rel="preload" href="/img/shape-1.svg" as="image" />
+    <link rel="preload" href="/img/shape-2.svg" as="image" />
+    <link rel="preload" href="/img/shape-3.svg" as="image" />
     <%= tags(assigns) || assigns.tags %>
     <%= Vite.inlined_phx_manifest() %>
     <%= Vite.vite_client() %>