From 17219a592d51ce9041e1576c4659a752633d20ed Mon Sep 17 00:00:00 2001
From: Alexis Jacomy <alexis.jacomy@gmail.com>
Date: Wed, 25 Sep 2024 17:38:33 +0200
Subject: [PATCH] [storybook] Fixes transitions between story

The custom decorator broke with the latest 8.3.* StoryBook migration.
This new hack solves the issue.
---
 packages/storybook/.storybook/preview.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/storybook/.storybook/preview.tsx b/packages/storybook/.storybook/preview.tsx
index 1409a9ee8..6c5973427 100644
--- a/packages/storybook/.storybook/preview.tsx
+++ b/packages/storybook/.storybook/preview.tsx
@@ -1,7 +1,8 @@
 import { Preview } from "@storybook/html";
 
+let _shouldReload = false;
 const forceReloadDecorator: Preview["decorators"] = (storyFn, context) => {
-  if (context.globals.shouldReload) {
+  if (_shouldReload) {
     // Change search params of the iframe
     const searchParams = new URLSearchParams(window.parent.location.search);
     searchParams.set(
@@ -18,10 +19,13 @@ const forceReloadDecorator: Preview["decorators"] = (storyFn, context) => {
     // The reload is fired, but the story renderer is already started.
     // To avoid blink effect and console error, we return the template inside a full
     // invisible div
-    return `<div style="height:100%;width:100%;visibility:hidden">${storyFn()}</div>`;
+    return `<div style="height:100%;width:100%;">
+      ${storyFn()}
+      <script>document.body.style.visibility = 'hidden';</script>
+    </div>`;
   }
 
-  context.globals.shouldReload = true;
+  _shouldReload = true;
   return storyFn();
 };