feat: unstable_ExpressiveSpinner

Author: SevereCloud

packages/vkui/src/components/Spinner/ExpressiveSpinner/Spinner.module.css

@@ -0,0 +1,13 @@
+.host {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 100%;
+  block-size: 100%;
+  color: var(--vkui--color_icon_medium);
+  will-change: contents;
+}
+
+.noColor {
+  color: currentColor;
+}

packages/vkui/src/components/Spinner/ExpressiveSpinner/Spinner.stories.tsx

@@ -0,0 +1,18 @@
+import { withCartesian } from '@project-tools/storybook-addon-cartesian';
+import type { Meta, StoryObj } from '@storybook/react';
+import { CanvasFullLayout } from '../../../storybook/constants';
+import { createStoryParameters } from '../../../testing/storybook/createStoryParameters';
+import { type MaterialSpinnerProps, Spinner } from './Spinner';
+
+const story: Meta<MaterialSpinnerProps> = {
+  title: 'Blocks/Spinner/Expressive',
+  component: Spinner,
+  parameters: createStoryParameters('Spinner', CanvasFullLayout),
+  decorators: [withCartesian],
+};
+
+export default story;
+
+type Story = StoryObj<MaterialSpinnerProps>;
+
+export const Playground: Story = {};

packages/vkui/src/components/Spinner/ExpressiveSpinner/Spinner.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import { classNames, hasReactNode } from '@vkontakte/vkjs';
+import { usePlatform } from '../../../hooks/usePlatform';
+import * as shapes from '../../../lib/material/shapes/shapes';
+import { RootComponent } from '../../RootComponent/RootComponent';
+import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';
+import { Spinner as SimpleSpinner, type SpinnerProps } from '../Spinner';
+import { IconMaterial } from './icons';
+import styles from './Spinner.module.css';
+
+const iconSizeMap = {
+  s: 16,
+  m: 24,
+  l: 32,
+  xl: 44,
+} as const;
+
+const defaultShapesList = [
+  shapes.softBurstParams,
+  shapes.cookie9Params,
+  shapes.pentagonParams,
+  shapes.pillParams,
+  shapes.sunnyParams,
+  shapes.cookie4Params,
+  shapes.ovalParams,
+] as const;
+
+export interface MaterialSpinnerProps extends SpinnerProps {
+  /**
+   * Последовательность форм между которыми будет происходить анимация.
+   */
+  polygons?: readonly [shapes.ShapeParameters, shapes.ShapeParameters, ...shapes.ShapeParameters[]];
+}
+
+function MaterialSpinner({
+  polygons = defaultShapesList,
+  size = 'm',
+  children = 'Загружается...',
+  disableAnimation = false,
+  noColor = false,
+  ...restProps
+}: MaterialSpinnerProps) {
+  const iconSize = iconSizeMap[size];
+
+  return (
+    <RootComponent
+      Component="span"
+      role="status"
+      {...restProps}
+      baseClassName={classNames(styles.host, noColor && styles.noColor)}
+    >
+      <IconMaterial size={iconSize} polygons={polygons} disableAnimation={disableAnimation} />
+      {hasReactNode(children) && <VisuallyHidden>{children}</VisuallyHidden>}
+    </RootComponent>
+  );
+}
+
+export function Spinner(props: SpinnerProps) {
+  const platform = usePlatform();
+
+  const Component = platform === 'ios' ? SimpleSpinner : MaterialSpinner;
+
+  return <Component {...props} />;
+}
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const unstable_ExpressiveSpinner = Spinner;

packages/vkui/src/components/Spinner/ExpressiveSpinner/icons.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+import * as React from 'react';
+import { useAnimationFrame } from '../../../hooks/useAnimationFrame';
+import { useReducedMotion } from '../../../lib/animation';
+import * as shapes from '../../../lib/material/shapes/shapes';
+import { interpolate } from '../../../lib/svg/path/interpolate';
+import { svgPathToString } from '../../../lib/svg/path/path';
+import * as operation from '../../../lib/svg/path/transform';
+import { SvgIcon } from '../SvgIcon';
+
+interface IconMaterialProps {
+  /**
+   * Список форм.
+   */
+  polygons: readonly shapes.ShapeParameters[];
+  /**
+   * Размер иконки.
+   */
+  size: number;
+  /**
+   * Отключение анимации.
+   */
+  disableAnimation: boolean;
+}
+
+export function IconMaterial(props: IconMaterialProps) {
+  return (
+    <SvgIcon size={props.size}>
+      <IconMaterialPath {...props} />
+    </SvgIcon>
+  );
+}
+
+const globalRotationDuration = 4666;
+const morphDuration = 200;
+const morphInterval = 650;
+const fullRotation = 360;
+const quarterRotation = fullRotation / 4;
+
+function calcProgress(startTime: number, time: number, duration: number, delay = 0) {
+  const fullDuration = duration + delay;
+
+  const timeProgress = fullDuration * (((time - startTime) % fullDuration) / fullDuration);
+
+  if (timeProgress < delay) {
+    return 0;
+  }
+
+  return (timeProgress - delay) / duration;
+}
+
+function IconMaterialPath({ size, polygons, disableAnimation }: IconMaterialProps) {
+  const ref = React.useRef<SVGPathElement>(null);
+
+  const morphSequence = React.useMemo(() => {
+    function getShape(index: number, size: number) {
+      return shapes.shapeWithRotate(polygons[index], size);
+    }
+
+    return new Array(polygons.length).fill(0).map((_, index) => {
+      return interpolate(getShape(index, size), getShape((index + 1) % polygons.length, size), {
+        maxSegmentLength: 2,
+      });
+    });
+  }, [size, polygons]);
+
+  const initialPath = React.useMemo(() => svgPathToString(morphSequence[0](0)), [morphSequence]);
+
+  const callback = React.useCallback(
+    (time: number) => {
+      const rotationAnimationProgress = calcProgress(0, time, globalRotationDuration);
+      const globalRotation = rotationAnimationProgress * fullRotation;
+
+      // TODO: spring({
+      //   dampingRatio: 0.6,
+      //   stiffness: 200,
+      //   visibilityThreshold: 0.1,
+      // })
+      const morphProgress = calcProgress(0, time, morphDuration, morphInterval);
+
+      const roundMorphIndex = Math.floor(time / (morphDuration + morphInterval));
+
+      const currentMorphIndex = roundMorphIndex % morphSequence.length;
+
+      const morphRotationTargetAngle = (roundMorphIndex * quarterRotation) % fullRotation;
+      const rotation = morphProgress * quarterRotation + morphRotationTargetAngle + globalRotation;
+
+      const morphFn = morphSequence[currentMorphIndex];
+      const morph = morphFn(morphProgress);
+
+      ref.current!.setAttribute(
+        'd',
+        svgPathToString(operation.rotate(morph, size / 2, size / 2, rotation)),
+      );
+    },
+    [morphSequence, size],
+  );
+
+  const isReducedMotion = useReducedMotion();
+  useAnimationFrame(callback, disableAnimation && isReducedMotion);
+
+  return <path ref={ref} fill="currentColor" d={initialPath}></path>;
+}

packages/vkui/src/components/Spinner/Readme.md

@@ -14,3 +14,24 @@
   <Spinner size="s">Кастомный текст вместо "Загружается...", который озвучит скринридер</Spinner>
 </Flex>
 ```
+
+<br>
+
+## unstable_ExpressiveSpinner
+
+Нестабильный компонент индикации загрузки в стиле
+[M3 Expressive](https://m3.material.io/components/loading-indicator/overview).
+Принимает все свойства, которые принимает компонент `Spinner`.
+Для платформы `ios` используется обычный `Spinner`.
+
+```jsx { "props": { "layout": false, "iframe": false } }
+<Flex
+  aria-busy={true}
+  aria-live="polite"
+  direction="column"
+  justify="center"
+  style={{ minHeight: 300 }}
+>
+  <ExpressiveSpinner size="xl" />
+</Flex>
+```

packages/vkui/src/components/Spinner/SvgIcon.tsx

@@ -0,0 +1,31 @@
+import { type HasRootRef } from '../../types';
+import { RootComponent } from '../RootComponent/RootComponent';
+
+/**
+ * Возвращает класс для иконки.
+ */
+export function iconClassName(size: number) {
+  return `vkuiIcon vkuiIcon--${size} vkuiIcon--w-${size} vkuiIcon--h-${size}`;
+}
+
+interface SvgIconProps extends React.ComponentProps<'svg'>, HasRootRef<SVGElement> {
+  /**
+   * Размер иконки.
+   */
+  size: number;
+}
+
+export function SvgIcon({ size, children, ...restProps }: SvgIconProps) {
+  return (
+    <RootComponent
+      Component="svg"
+      baseClassName={iconClassName(size)}
+      aria-hidden="true"
+      width={size}
+      height={size}
+      {...restProps}
+    >
+      {children}
+    </RootComponent>
+  );
+}

packages/vkui/src/components/Spinner/icons.tsx

@@ -1,57 +1,54 @@
 import * as React from 'react';
-
-function iconClassName(size: number) {
-  return `vkuiIcon vkuiIcon--${size} vkuiIcon--w-${size} vkuiIcon--h-${size}`;
-}
+import { SvgIcon } from './SvgIcon';
 
 export function Icon16Spinner({ children }: React.PropsWithChildren) {
   return (
-    <svg className={iconClassName(16)} aria-hidden="true" width="16" height="16">
+    <SvgIcon size={16}>
       <path
         fill="currentColor"
         d="M8 3.25a4.75 4.75 0 0 0-4.149 7.065.75.75 0 1 1-1.31.732A6.25 6.25 0 1 1 8 14.25a.75.75 0 0 1 .001-1.5 4.75 4.75 0 1 0 0-9.5Z"
       >
         {children}
       </path>
-    </svg>
+    </SvgIcon>
   );
 }
 
 export function Icon24Spinner({ children }: React.PropsWithChildren) {
   return (
-    <svg className={iconClassName(24)} aria-hidden="true" width="24" height="24">
+    <SvgIcon size={24}>
       <path
         fill="currentColor"
         d="M16.394 5.077A8.2 8.2 0 0 0 4.58 15.49a.9.9 0 0 1-1.628.767A10 10 0 1 1 12 22a.9.9 0 0 1 0-1.8 8.2 8.2 0 0 0 4.394-15.123"
       >
         {children}
       </path>
-    </svg>
+    </SvgIcon>
   );
 }
 
 export function Icon32Spinner({ children }: React.PropsWithChildren) {
   return (
-    <svg className={iconClassName(32)} aria-hidden="true" width="32" height="32">
+    <SvgIcon size={32}>
       <path
         fill="currentColor"
         d="M16 32a1.5 1.5 0 0 1 0-3c7.18 0 13-5.82 13-13S23.18 3 16 3 3 8.82 3 16c0 1.557.273 3.074.8 4.502A1.5 1.5 0 1 1 .986 21.54 16 16 0 0 1 0 16C0 7.163 7.163 0 16 0s16 7.163 16 16-7.163 16-16 16"
       >
         {children}
       </path>
-    </svg>
+    </SvgIcon>
   );
 }
 
 export function Icon44Spinner({ children }: React.PropsWithChildren) {
   return (
-    <svg className={iconClassName(44)} aria-hidden="true" width="44" height="44">
+    <SvgIcon size={44}>
       <path
         fill="currentColor"
         d="M22 44a1.5 1.5 0 0 1 0-3c10.493 0 19-8.507 19-19S32.493 3 22 3 3 11.507 3 22c0 2.208.376 4.363 1.103 6.397a1.5 1.5 0 1 1-2.825 1.01A22 22 0 0 1 0 22C0 9.85 9.85 0 22 0s22 9.85 22 22-9.85 22-22 22"
       >
         {children}
       </path>
-    </svg>
+    </SvgIcon>
   );
 }

packages/vkui/src/hooks/useAnimationFrame.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+
+/**
+ * Обертка над `requestAnimationFrame`. В функцию `` пере
+ *
+ * ```ts
+ * const animate = React.useCallback((delta: number) => {
+ *   console.log('Delta:', delta);
+ * }, []);
+ *
+ * useAnimationFrame(animate);
+ * ```
+ *
+ * @param callback Функция, которая будет вызываться каждый раз при обновлении анимации.
+ * Принимает параметр `delta` - время в миллисекундах, прошедшее с первого кадра анимации.
+ */
+export function useAnimationFrame(callback: (delta: number) => void, disableAnimation = false) {
+  const handleRef = React.useRef<number>(undefined);
+  const startTimestampRef = React.useRef<number>(undefined);
+
+  const frameRequestCallback = React.useCallback(
+    (timestamp: number) => {
+      if (disableAnimation) {
+        return;
+      }
+
+      if (startTimestampRef.current === undefined) {
+        startTimestampRef.current = timestamp;
+      }
+
+      const delta = timestamp - startTimestampRef.current;
+      callback(delta);
+
+      handleRef.current = requestAnimationFrame(frameRequestCallback);
+    },
+    [callback, disableAnimation],
+  );
+
+  React.useEffect(() => {
+    handleRef.current = requestAnimationFrame(frameRequestCallback);
+    return () => cancelAnimationFrame(handleRef.current!);
+  }, [frameRequestCallback]);
+}

packages/vkui/src/index.ts

@@ -233,6 +233,7 @@ export { TabsItem } from './components/TabsItem/TabsItem';
 export type { TabsItemProps } from './components/TabsItem/TabsItem';
 export { Spinner } from './components/Spinner/Spinner';
 export type { SpinnerProps } from './components/Spinner/Spinner';
+export { unstable_ExpressiveSpinner } from './components/Spinner/ExpressiveSpinner/Spinner';
 export { PullToRefresh } from './components/PullToRefresh/PullToRefresh';
 export type { PullToRefreshProps } from './components/PullToRefresh/PullToRefresh';
 export { Link } from './components/Link/Link';