Set markdown renderer as client only to fix hydration issues. Will later try to improve it and set it back as normal

pages/explorer/[projectId]/[...slug].vue

@@ -4,7 +4,7 @@ definePageMeta({
 })
 
 const route = useRoute();
-const { data, status } = await useFetch(`/api/project/${route.params.projectId}/file/${encodeURIComponent(unifySlug(route.params.slug))}`);
+const { data, status } = await useLazyFetch(`/api/project/${route.params.projectId}/file/${encodeURIComponent(unifySlug(route.params.slug))}`);
 </script>
 
 <template>
@@ -12,7 +12,8 @@ const { data, status } = await useFetch(`/api/project/${route.params.projectId}/
         <Title v-if="data">{{ data.title }}</Title>
     </Head>
     <div class="flex-1 flex overflow-hidden">
-        <template v-if="!!data && data.type == 'Markdown' && !!data.content">
+        <template v-if="status === 'pending'"><div class="loading"></div></template>
+        <template v-else-if="!!data && data.type == 'Markdown' && !!data.content">
             <div class="md:px-24 ps-8 my-1 whitespace-break-spaces">
                 <ProseH1>{{ data.title }}</ProseH1>
                 <Markdown :content="data.content"></Markdown>