[UIK-6131][spin-container] fixed an issue with inert timer

semcore/spin-container/src/SpinContainer.tsx

@@ -9,16 +9,12 @@ import React from 'react';
 import type { NSSpinContainer } from './SpinContainer.type';
 import style from './style/spin-container.shadow.css';
 
-type State = {
-  inert?: boolean;
-};
-
 class SpinContainerRoot extends Component<
   Intergalactic.InternalTypings.InferComponentProps<NSSpinContainer.Component>,
   typeof SpinContainerRoot.enhance,
   {},
   {},
-  State,
+  {},
   NSSpinContainer.DefaultProps
 > {
   static displayName = 'SpinContainer';
@@ -31,29 +27,6 @@ class SpinContainerRoot extends Component<
 
   static enhance = [resolveColorEnhance()] as const;
 
-  state: State = {
-    inert: this.props.loading,
-  };
-
-  private inertTimer: ReturnType<typeof setTimeout> | null = null;
-
-  componentDidUpdate(prevProps: typeof this.asProps) {
-    const { loading } = this.props;
-    if (prevProps.loading !== loading) {
-      if (this.inertTimer) {
-        clearTimeout(this.inertTimer);
-      }
-
-      if (loading) {
-        this.setState({ inert: true });
-      } else {
-        this.inertTimer = setTimeout(() => {
-          this.setState({ inert: false });
-        }, this.asProps.duration + 50);
-      }
-    }
-  }
-
   getOverlayProps() {
     const { loading, background, duration, size, theme, resolveColor } = this.asProps;
     return {
@@ -69,9 +42,11 @@ class SpinContainerRoot extends Component<
   }
 
   getContentProps() {
-    const { inert } = this.state;
+    const { loading } = this.asProps;
 
-    return { inert: inert ? '' : undefined };
+    return {
+      inert: loading ? '' : undefined,
+    };
   }
 
   render() {
@@ -103,18 +78,24 @@ class SpinContainerRoot extends Component<
 type OverlayProps = Intergalactic.InternalTypings.InferChildComponentProps<NSSpinContainer.Overlay.Component, typeof SpinContainerRoot, 'Overlay'>;
 
 class Overlay extends Component<OverlayProps> {
-  static defaultProps = ({ size, theme }: OverlayProps) => ({
-    children: <Spin size={size} theme={theme} />,
-  });
-
   render() {
     const SOverlay = Root;
-    const { styles, theme, background, loading, duration, resolveColor } = this.asProps;
+    const { styles, theme, size, background, loading, duration, resolveColor, children: hasChildren, Children } = this.asProps;
     const useTheme = background ? 'custom' : theme;
 
     return sstyled(styles)(
       <FadeInOut visible={loading} duration={duration}>
-        <SOverlay render={Box} use:theme={useTheme} use:background={resolveColor(background)} />
+        <SOverlay
+          render={Box}
+          use:theme={useTheme}
+          use:background={resolveColor(background)}
+        >
+          {hasChildren
+            ? <Children />
+            : (
+                <Spin size={size} theme={theme} aria-hidden={!loading} />
+              )}
+        </SOverlay>
       </FadeInOut>,
     );
   }

stories/components/spin-container/tests/examples/spin-container-with-autofocus-input.tsx

@@ -0,0 +1,45 @@
+import { Flex } from '@semcore/ui/base-components';
+import Button from '@semcore/ui/button';
+import Input from '@semcore/ui/input';
+import SpinContainer from '@semcore/ui/spin-container';
+import { Text } from '@semcore/ui/typography';
+import React from 'react';
+
+const Demo = () => {
+  const spinContainerRef = React.useRef<HTMLDivElement>(null);
+  const [isLoading, setIsLoading] = React.useState(true);
+
+  React.useEffect(() => {
+    setTimeout(() => {
+      spinContainerRef.current?.focus();
+    });
+  }, []);
+
+  const handleClick = React.useCallback(() => {
+    if (isLoading === false) {
+      spinContainerRef.current?.focus();
+    }
+    setIsLoading(!isLoading);
+  }, [isLoading]);
+
+  return (
+    <Flex direction='column' gap={2}>
+      <Button onClick={handleClick} w={200}>change loading</Button>
+
+      <SpinContainer loading={isLoading} ref={spinContainerRef} aria-live='polite' role='status'>
+        <Flex direction='column' gap={2} w={150} h={300}>
+          <Text htmlFor='spin-container-input' size={200} tag='label'>
+            Input
+          </Text>
+          {!isLoading && (
+            <Input>
+              <Input.Value id='spin-container-input' autoFocus={true} />
+            </Input>
+          )}
+        </Flex>
+      </SpinContainer>
+    </Flex>
+  );
+};
+
+export default Demo;

stories/components/spin-container/tests/spin-container.stories.tsx

@@ -4,6 +4,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import SpinContainerBaseExample, {
   defaultSpinContainerProps,
 } from './examples/spin-container-base';
+import SpinContainerWithAutofocusInputExample from './examples/spin-container-with-autofocus-input';
 
 const meta: Meta<typeof SpinContainer> = {
   title: 'Components/SpinContainer/Tests',
@@ -62,3 +63,7 @@ export const SpinContainerBase: StoryObj<typeof defaultSpinContainerProps> = {
   argTypes: spinContainerArgTypes,
   args: defaultSpinContainerProps,
 };
+
+export const SpinContainerWithAutofocusInput = {
+  render: SpinContainerWithAutofocusInputExample,
+};