chore: suspense with fallback for mobile lazy TopAlert

gravity-ui · Nov 10, 2024 · d579d9f · d579d9f
1 parent 4b9d958
commit d579d9f
Showing 1 changed file with 6 additions and 2 deletions.
diff --git a/src/components/MobileHeader/MobileHeader.tsx b/src/components/MobileHeader/MobileHeader.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import React, {Suspense, useCallback, useEffect, useMemo, useState} from 'react';
 
 import {useForwardRef} from '../../hooks/useForwardRef';
 import {Content, RenderContentType} from '../Content';
@@ -268,7 +268,11 @@ export const MobileHeader = React.forwardRef<HTMLDivElement, MobileHeaderProps>(
         return (
             <div className={b({compact}, className)} ref={targetRef}>
                 <div className={b('top')}>
-                    {topAlert && <TopAlert alert={topAlert} />}
+                    {topAlert && (
+                        <Suspense fallback={null}>
+                            <TopAlert alert={topAlert} />
+                        </Suspense>
+                    )}
                     <header className={b('header')} style={{height: size}}>
                         <Burger
                             opened={visiblePanel === burgerPanelItem.id}