[RFC] Global loading replacement

[zombieJ]

📋 RFC

Summary

Support customize loading effect to replace with Spin or other loading placeholder if exist:

Basic example

<ConfigProvider renderLoading={() => <div />}  />

Motivation

For the blog Extends Theme provide a css way to replace the loading effect but it has the limitation of must be in CSS way and not support some magic effect (e.g. Dribble: loading search).
It should provide a simple way to support the extension.

Detailed

renderLoading is similar as renderEmpty type style:

type RenderLoading =(componentName: string, info: { percent?: number }) => ReactNode;

When the ConfigProvider config renderLoading, it will replace all the loading related content on the UI.

Drawbacks

N/A

Adoption strategy

feature in minor

[afc163]

<ConfigProvider
  spin={{ indicator: ReactNode }}
>
  ...
</ConfigProvider>

How about that?

[zombieJ]

For Button Select component, it not use Spin. And this RFC want to enhance the percent loading logic in each case for more spec case.

[arvinxx]

what if I just want to replace the spin other than the button loading?

[zombieJ]

what if I just want to replace the spin other than the button loading?

How about?

renderLoading={(component) => component !== 'Spin' ? info.originNode : <div />}

[zombieJ]

PS: We need wrap on the HappyWork theme which will modify the Button loading status which is not using Spin.

[afc163]

renderLoading={(component) => component !== 'Spin' ? info.originNode : <div />}

+1

[arvinxx]

is renderLoading or loadingRender ?

[zombieJ]

xxxRender is for sub component render. Loading not belong to the ConfigProvider.

[MadCcc]

loadingComponent: (props: { loading: boolean, componentName: string }) => ReactElement

loadingComponent={Spin}
loadingComponent={() => }

const Spin: FC = (props) => {
switch(props.componentName) {
case 'Button':
return
default:
return
}
}

[zombieJ]

// 这是合理的
const MySpin = () => {
  const [x, setX] = useState(0);
  useEffect(() => {
    setX(100);
  }, []);

  return <Animation val={x} />
};

loadingComponent={MySpin}

[zombieJ]

const MySpin = () => {
  const [x, setX] = useState(0);
  useEffect(() => {
    setX(100);
  }, []);

  return <Animation val={x} />
};

loadingComponent={(props) => <MySpin {...props} />}

[zombieJ]

const MyButton = () => {
  const [, forceUpdate] = useState();
  
  return <ConfigProvider loadingComponent={(props) => <MySpin {...props} />}>
      <Button onClick={() => forceUpdate({})} />
    </ConfigProvider>

};

[zombieJ]

// render fc
const replacedNode = loadingComponent(props);

// FC
const replacedNode = <LoadingComponent {...props} />