common: Ensure component is rendered after import is finished

shenlu89 · laymonage · commit 06a9bf16188c · 2024-12-15T09:47:38.000Z
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>
 
