fix: hydratation mismatches (#835)

Author: ThibaudDauce

components/ContactPointSelect.vue

@@ -160,7 +160,7 @@ const props = defineProps<{
 
 const { t } = useTranslation()
 const { $api } = useNuxtApp()
-const { isLoading, start, finish } = useLoadingIndicator()
+const isLoading = ref(false)
 
 const contactSelectRef = useTemplateRef('contactSelect')
 
@@ -232,7 +232,7 @@ async function save() {
     console.error('[ContactPointSelect] Cannot save: contact already has an id, expected a new contact')
     return
   }
-  start()
+  isLoading.value = true
   try {
     const newContact = await newContactPoint($api, props.organization, contact.value)
     if (contactSelectRef.value) {
@@ -241,7 +241,7 @@ async function save() {
     }
   }
   finally {
-    finish()
+    isLoading.value = false
   }
 }
 </script>

components/Datasets/AdminUpdateDatasetPage.vue

@@ -142,7 +142,7 @@ const { t } = useTranslation()
 const { $api } = useNuxtApp()
 
 const route = useRoute()
-const { start, finish, isLoading } = useLoadingIndicator()
+const isLoading = ref(false)
 
 const url = computed(() => `/api/2/datasets/${route.params.id}/`)
 const { data: dataset, status, refresh } = await useAPI<DatasetV2WithFullObject>(url, {
@@ -165,7 +165,7 @@ async function save() {
   if (!datasetForm.value) throw new Error('No dataset form')
 
   try {
-    start()
+    isLoading.value = true
     if (
       datasetForm.value.contact_points
       && datasetForm.value.owned?.organization
@@ -187,12 +187,12 @@ async function save() {
     window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
   }
   finally {
-    finish()
+    isLoading.value = false
   }
 }
 
 async function deleteDataset() {
-  start()
+  isLoading.value = true
   try {
     await $api(`/api/1/datasets/${route.params.id}`, {
       method: 'DELETE',
@@ -202,13 +202,13 @@ async function deleteDataset() {
     window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
   }
   finally {
-    finish()
+    isLoading.value = false
   }
 }
 
 async function switchDatasetPrivate() {
   if (!datasetForm.value) throw new Error('No dataset form')
-  start()
+  isLoading.value = true
   try {
     await $api(`/api/1/datasets/${dataset.value?.id}/`, {
       method: 'PUT',
@@ -223,13 +223,13 @@ async function switchDatasetPrivate() {
     }
   }
   finally {
-    finish()
+    isLoading.value = false
   }
 }
 
 async function restoreDataset() {
   if (!datasetForm.value) throw new Error('No dataset form')
-  start()
+  isLoading.value = true
   try {
     await $api(`/api/1/datasets/${dataset.value?.id}/`, {
       method: 'PUT',
@@ -239,13 +239,13 @@ async function restoreDataset() {
     toast.success(t('Jeu de données restauré !'))
   }
   finally {
-    finish()
+    isLoading.value = false
   }
 }
 
 async function archiveDataset() {
   if (!datasetForm.value) throw new Error('No dataset form')
-  start()
+  isLoading.value = true
   try {
     await $api(`/api/1/datasets/${dataset.value?.id}/`, {
       method: 'PUT',
@@ -261,14 +261,14 @@ async function archiveDataset() {
     window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
   }
   finally {
-    finish()
+    isLoading.value = false
   }
 }
 
 async function feature() {
   const method = dataset.value?.featured ? 'DELETE' : 'POST'
   try {
-    start()
+    isLoading.value = true
     await $api(`/api/1/datasets/${route.params.id}/featured`, {
       method,
     })
@@ -284,7 +284,7 @@ async function feature() {
     toast.error(t('Impossible de mettre en avant ce jeu de données'))
   }
   finally {
-    finish()
+    isLoading.value = false
   }
 }
 </script>