fix: use a ping pong approach instead

packages/lsd-react/.storybook/preview-head.html

@@ -1,23 +1,16 @@
 <script>
-  function sendHeightToParent() {
-    const height =
-      document.documentElement.scrollHeight || document.body.scrollHeight
-    window.parent.postMessage(
-      {
-        type: 'iframeResize',
-        height: height,
-      },
-      '*',
-    )
-  }
-
-  document.addEventListener('DOMContentLoaded', function () {
-    // Send initial height.
-    sendHeightToParent()
-
-    // Ensure the interval is set only once.
-    if (!window.heightIntervalSet) {
-      window.heightIntervalSet = setInterval(sendHeightToParent, 1000)
+  // This script is used to send the height of the storybook iframe to the parent window.
+  window.addEventListener('message', function (event) {
+    if (event.data && event.data.type === 'requestHeight') {
+      const height =
+        document.documentElement.scrollHeight || document.body.scrollHeight
+      event.source.postMessage(
+        {
+          type: 'iframeHeightResponse',
+          height: height,
+        },
+        '*',
+      )
     }
   })
 </script>