woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-01 07:02:48 +08:00
Code Issues Projects Packages Wiki Activity Actions

Merge pull request #3090 from woocommerce/PCP-4205-things-to-do-add-a-temporary-spinner-to-prevent-content-jumping

Browse source 
Settings UI: Add spinner when waiting for all components to be ready (4205)
This commit is contained in:
Emili Castells 2025-02-11 14:45:28 +01:00 • committed by GitHub
commit fc76706777
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 9 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

9
modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabOverview.js
View file

@ -16,6 +16,7 @@ import { useTodos } from '../../../../data/todos/hooks';
import { useMerchantInfo } from '../../../../data/common/hooks'; import { useMerchantInfo } from '../../../../data/common/hooks';
import { STORE_NAME as COMMON_STORE_NAME } from '../../../../data/common'; import { STORE_NAME as COMMON_STORE_NAME } from '../../../../data/common';
import { STORE_NAME as TODOS_STORE_NAME } from '../../../../data/todos'; import { STORE_NAME as TODOS_STORE_NAME } from '../../../../data/todos';
import { CommonHooks, TodosHooks } from '../../../../data';
import { getFeatures } from '../Components/Overview/features-config'; import { getFeatures } from '../Components/Overview/features-config';
@ -23,8 +24,16 @@ import {
NOTIFICATION_ERROR, NOTIFICATION_ERROR,
NOTIFICATION_SUCCESS, NOTIFICATION_SUCCESS,
} from '../../../ReusableComponents/Icons'; } from '../../../ReusableComponents/Icons';
import SpinnerOverlay from '../../../ReusableComponents/SpinnerOverlay';
const TabOverview = () => { const TabOverview = () => {
const { isReady: areTodosReady } = TodosHooks.useTodos();
const { isReady: merchantIsReady } = CommonHooks.useMerchantInfo();
if ( ! areTodosReady || ! merchantIsReady ) {
return <SpinnerOverlay asModal={ true } />;
}
return ( return (
<div className="ppcp-r-tab-overview"> <div className="ppcp-r-tab-overview">
<OverviewTodos /> <OverviewTodos />