Wait 100ms to show the preparing spinner

storybookjs · Mar 18, 2022 · 2af2ad4 · 2af2ad4
1 parent 6a6af92
commit 2af2ad4
Showing 1 changed file with 9 additions and 2 deletions.
diff --git a/lib/preview-web/src/WebView.ts b/lib/preview-web/src/WebView.ts
@@ -8,6 +8,8 @@ import { Story } from '@storybook/store';
 
 const { document } = global;
 
+const PREPARING_DELAY = 100;
+
 const layoutClassMap = {
   centered: 'sb-main-centered',
   fullscreen: 'sb-main-fullscreen',
@@ -39,6 +41,8 @@ export class WebView {
 
   testing = false;
 
+  preparingTimeout: ReturnType<typeof setTimeout> = null;
+
   constructor() {
     // Special code for testing situations
     const { __SPECIAL_TEST_PARAMETER__ } = qs.parse(document.location.search, {
@@ -111,6 +115,7 @@ export class WebView {
   }
 
   showMode(mode: Mode) {
+    clearTimeout(this.preparingTimeout);
     Object.keys(Mode).forEach((otherMode) => {
       if (otherMode === mode) {
         document.body.classList.add(classes[otherMode]);
@@ -146,11 +151,13 @@ export class WebView {
   }
 
   showPreparingStory() {
-    this.showMode(Mode.PREPARING_STORY);
+    clearTimeout(this.preparingTimeout);
+    this.preparingTimeout = setTimeout(() => this.showMode(Mode.PREPARING_STORY), PREPARING_DELAY);
   }
 
   showPreparingDocs() {
-    this.showMode(Mode.PREPARING_DOCS);
+    clearTimeout(this.preparingTimeout);
+    this.preparingTimeout = setTimeout(() => this.showMode(Mode.PREPARING_DOCS), PREPARING_DELAY);
   }
 
   showMain() {