fix(GlobalLoader): render in StrictMode (#3582)

skbkontur · Jan 30, 2025 · 0d83d91 · 0d83d91
1 parent f873cde
commit 0d83d91
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 9 deletions.
diff --git a/packages/react-ui/components/Calendar/__tests__/Calendar.test.tsx b/packages/react-ui/components/Calendar/__tests__/Calendar.test.tsx
@@ -84,7 +84,7 @@ describe('Calendar', () => {
       }),
     );
 
-    await waitFor(() => expect(onMonthChange).toHaveReturnedWith({ month: 7, year: 2017 }), { timeout: 5000 });
+    await waitFor(() => expect(onMonthChange).toHaveReturnedWith({ month: 7, year: 2017 }), { timeout: 8000 });
   });
 
   it('onMonthChange returns correct year', async () => {
@@ -106,7 +106,7 @@ describe('Calendar', () => {
       );
     });
 
-    await waitFor(() => expect(onMonthChange).toHaveLastReturnedWith({ month: 6, year: 2018 }), { timeout: 5000 });
+    await waitFor(() => expect(onMonthChange).toHaveLastReturnedWith({ month: 6, year: 2018 }), { timeout: 8000 });
   });
 
   it('should set langCode', () => {

diff --git a/packages/react-ui/components/GlobalLoader/GlobalLoader.tsx b/packages/react-ui/components/GlobalLoader/GlobalLoader.tsx
@@ -74,7 +74,7 @@ type DefaultProps = Required<
   >
 >;
 
-let currentGlobalLoader: GlobalLoader;
+let currentGlobalLoader: GlobalLoader | null;
 @rootNode
 export class GlobalLoader extends React.Component<GlobalLoaderProps, GlobalLoaderState> {
   public static __KONTUR_REACT_UI__ = 'GlobalLoader';
@@ -132,6 +132,10 @@ export class GlobalLoader extends React.Component<GlobalLoaderProps, GlobalLoade
     }
   }
 
+  componentWillUnmount(): void {
+    currentGlobalLoader = null;
+  }
+
   componentDidUpdate(prevProps: Readonly<GlobalLoaderProps>) {
     const { expectedResponseTime, rejected, active } = this.getProps();
     if (expectedResponseTime !== prevProps.expectedResponseTime) {
@@ -183,9 +187,9 @@ export class GlobalLoader extends React.Component<GlobalLoaderProps, GlobalLoade
    * @public
    */
   public static start = (expectedResponseTime?: number) => {
-    currentGlobalLoader.setActive();
+    currentGlobalLoader?.setActive();
     if (typeof expectedResponseTime === 'number') {
-      currentGlobalLoader.updateExpectedResponseTime(expectedResponseTime);
+      currentGlobalLoader?.updateExpectedResponseTime(expectedResponseTime);
     }
   };
 
@@ -196,7 +200,7 @@ export class GlobalLoader extends React.Component<GlobalLoaderProps, GlobalLoade
    * @public
    */
   public static done = () => {
-    currentGlobalLoader.setDone();
+    currentGlobalLoader?.setDone();
   };
 
   /**
@@ -206,7 +210,7 @@ export class GlobalLoader extends React.Component<GlobalLoaderProps, GlobalLoade
    * @public
    */
   public static reject = () => {
-    currentGlobalLoader.setReject(true);
+    currentGlobalLoader?.setReject(true);
   };
 
   /**
@@ -216,7 +220,7 @@ export class GlobalLoader extends React.Component<GlobalLoaderProps, GlobalLoade
    * @public
    */
   public static accept = () => {
-    currentGlobalLoader.setReject(false);
+    currentGlobalLoader?.setReject(false);
   };
 
   public setActive = () => {

diff --git a/packages/react-ui/components/GlobalLoader/__tests__/GlobalLoader-test.tsx b/packages/react-ui/components/GlobalLoader/__tests__/GlobalLoader-test.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { StrictMode } from 'react';
 import { act, render, screen, waitFor } from '@testing-library/react';
 
 import { GlobalLoader, GlobalLoaderDataTids } from '../GlobalLoader';
@@ -25,6 +25,40 @@ describe('Global Loader', () => {
     expect(refGlobalLoader2.current?.state.dead).toBe(false);
   });
 
+  describe('in StrictMode', () => {
+    it('should render', async () => {
+      render(
+        <StrictMode>
+          <GlobalLoader expectedResponseTime={2000} active ref={refGlobalLoader} />
+        </StrictMode>,
+      );
+
+      await delay(DELAY_BEFORE_GLOBAL_LOADER_SHOW);
+
+      expect(screen.getByTestId(GlobalLoaderDataTids.root)).toBeInTheDocument();
+      expect(refGlobalLoader.current?.state.dead).toBe(false);
+    });
+
+    it('should only render one instance', async () => {
+      render(
+        <StrictMode>
+          <GlobalLoader expectedResponseTime={2000} active ref={refGlobalLoader} />
+        </StrictMode>,
+      );
+      render(
+        <StrictMode>
+          <GlobalLoader expectedResponseTime={2000} active ref={refGlobalLoader2} />
+        </StrictMode>,
+      );
+
+      await delay(DELAY_BEFORE_GLOBAL_LOADER_SHOW);
+
+      expect(screen.getByTestId(GlobalLoaderDataTids.root)).toBeInTheDocument();
+      expect(refGlobalLoader.current?.state.dead).toBe(true);
+      expect(refGlobalLoader2.current?.state.dead).toBe(false);
+    });
+  });
+
   describe('with props', () => {
     it('should set active', async () => {
       render(