feat: overlayRender 参数中增加当前预览图片是否正在加载中属性 loading

Author: big-camel

apps/example/pages/docs/getting-started.en-US.mdx

@@ -151,6 +151,7 @@ Add a `scale` control to achieve zoom in and out buttons:
 
 The parameters provided by the `toolbarRender` function are:
 
+- `loading` - Whether the current preview picture is loading `boolean`
 - `mode` - current mode `drag` | `slide`
 - `images` - list of images `DataType[]`
 - `index` - the current index `number`

apps/example/pages/docs/getting-started.zh-CN.mdx

@@ -150,6 +150,7 @@ export default function MyComponent() {
 
 `toolbarRender` 函数提供的参数有：
 
+- `loading` - 当前预览图片是否加载中 `boolean`
 - `mode` - 当前模式 `drag` | `slide`
 - `images` - 图片列表 `DataType[]`
 - `index` - 当前索引 `number`

packages/react-photo-view/src/PhotoBox.tsx

@@ -442,10 +442,14 @@ export default function PhotoBox({
 
   useIsomorphicLayoutEffect(() => {
     if (isActive) {
-      expose({ scale, rotate, ...fn })
+      expose({ scale, rotate, loading: !loaded, ...fn })
     }
   }, [isActive])
 
+  useIsomorphicLayoutEffect(() => {
+    expose({ loading: !loaded })
+  }, [loaded])
+
   function handlePhotoLoad(params: IPhotoLoadedParams) {
     updateState({
       ...params,

packages/react-photo-view/src/PhotoSlider.tsx

@@ -42,6 +42,8 @@ export interface IPhotoSliderProps extends PhotoProviderBase {
 }
 
 type PhotoSliderState = {
+  // 当前预览图片是否加载中
+  loading: boolean
   // 偏移量
   x: number
   // 偏移量
@@ -73,6 +75,7 @@ type PhotoSliderState = {
 }
 
 const initialState: PhotoSliderState = {
+  loading: false,
   x: 0,
   y: 0,
   touched: false,
@@ -150,6 +153,8 @@ export default function PhotoSlider(props: IPhotoSliderProps) {
   const [innerIndex, updateInnerIndex] = useState(0)
 
   const {
+    loading,
+
     x,
     y,
     touched,
@@ -388,6 +393,7 @@ export default function PhotoSlider(props: IPhotoSliderProps) {
   // 覆盖物参数
   const overlayParams: OverlayRenderProps | undefined = onScale &&
     onRotate && {
+      loading,
       mode: isDragMode ? 'drag' : 'slide',
       images,
       index,

packages/react-photo-view/src/types.ts

@@ -131,6 +131,10 @@ export interface BrokenElementParams {
 }
 
 export interface OverlayRenderProps {
+  /**
+   * 当前预览图片是否加载中
+   */
+  loading: boolean
   /**
    * 当前模式
    */
@@ -182,6 +186,8 @@ export interface OverlayRenderProps {
 }
 
 export interface ExposedProperties {
+  // 是否加载中
+  loading?: boolean
   // 缩放
   scale?: number
   // 旋转