[Feature Request] 关于src/loading.tsx，能否对每个页面进行不同的loading定制

[wenlei0617]

[Feature Request] 关于src/loading.tsx，能否对每个页面进行不同的loading定制

[fz6m]

现在 src/loading.tsx 可以统一定义全局所有页面级别在懒加载时的 loading 动画，如果你需要每个页面不同的话，在这里面判断一下吧。

比如：

// .umirc.ts

  routes: [
    { path: '/docs', component: 'docs', loading: 'A' },
  ]

// src/loading.tsx

import { ReactNode } from 'react'
import { useRouteProps } from 'umi'

const map: Record<string, ReactNode> = {
  A: <div>A loading</div>, // or import a component, don't use async import
}

export default function Loading() {
  const props = useRouteProps()

  const fallback = (
    <div>fallback loading</div>
  )

  if (props?.loading) {
    return map[props.loading] || fallback
  }

  return fallback
}

你提到的在每个页面下新增 loading.tsx 文件来预加载，现在约定式路由里每个文件都会被视为一个路由路径，添加 loading.tsx 就变成 /loading 的路由了，所以这种方式是做不到的，比如 nextjs 也只能在 app dir 而不是 pages dir 去新增各种约定文件的设定。

另外现在绝大多数用户使用的是配置式路由，自己根据配置调整下或者根据 location.path 判断下条件渲染吧。