common: ensure component is rendered after import is finished

giscus · Dec 15, 2024 · ee8c05b · ee8c05b
1 parent 1498207
commit ee8c05b
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 8 deletions.
diff --git a/react/src/lib/Giscus.tsx b/react/src/lib/Giscus.tsx
@@ -22,8 +22,7 @@ export default function Giscus({
 
   useEffect(() => {
     if (mounted) return;
-    void import('giscus');
-    setMounted(true);
+    void import('giscus').then(() => setMounted(true));
   }, []);
 
   if (!mounted) return null;

diff --git a/solid/src/lib/Giscus.tsx b/solid/src/lib/Giscus.tsx
@@ -6,8 +6,7 @@ export default function Giscus(props: GiscusProps) {
 
   createEffect(() => {
     if (mounted()) return;
-    void import('giscus');
-    setMounted(true);
+    void import('giscus').then(() => setMounted(true));
   });
 
   // Note: make sure to use kebab-case for the web component's attributes,

diff --git a/svelte/src/lib/Giscus.svelte b/svelte/src/lib/Giscus.svelte
@@ -28,8 +28,7 @@
   let mounted = false;
 
   onMount(() => {
-    mounted = true;
-    void import('giscus');
+    void import('giscus').then(() => (mounted = true));
   });
 </script>
 

diff --git a/vue/src/lib/Giscus.vue b/vue/src/lib/Giscus.vue
@@ -31,8 +31,7 @@ defineProps<{
 const mounted = ref(false);
 
 onMounted(() => {
-  mounted.value = true;
-  import('giscus');
+  import('giscus').then(() => mounted.value = true);
 });
 </script>