feat(projects): load preview image in component instead of doing it in the store

app/stores/projects.ts

@@ -62,15 +62,17 @@ export const useProjectsStore = defineStore("projects", {
     projects: [] as {
       description: string;
       thumbnail: string;
-      preview: HTMLImageElement;
+      preview: string;
       url: string | null;
       body: MarkdownBody;
     }[],
     currentProject: 0,
+    loading: true,
   }),
 
   actions: {
     async loadProjects() {
+      this.loading = true;
       const { data: projects } = await useAsyncData("projects", () =>
         queryCollection("projects").order("order", "ASC").all(),
       );
@@ -84,11 +86,13 @@ export const useProjectsStore = defineStore("projects", {
         this.projects.push({
           description: project.description,
           thumbnail: `/images/projects/thumbnails/${id}.webp`,
-          preview: createImage(`/images/projects/previews/${id}.webp`),
+          preview: `/images/projects/previews/${id}.webp`,
           url: project.url,
           body: simplifyMarkdownAST(project.body),
         });
       }
+
+      this.loading = false;
     },
 
     visitProject() {