diff --git a/client/dashboard/app/loading-screen.scss b/client/dashboard/app/loading-screen.scss index 253b29252289..b4fa80fa48bf 100644 --- a/client/dashboard/app/loading-screen.scss +++ b/client/dashboard/app/loading-screen.scss @@ -1,17 +1,4 @@ -@keyframes logo-pulse { - 0% { - opacity: 0.65; - filter: brightness(0.85); - } - 50% { - opacity: 1; - filter: brightness(1.15); - } - 100% { - opacity: 0.65; - filter: brightness(0.85); - } -} +@import './pulse'; .wpcom-site__logo { position: absolute; @@ -20,5 +7,5 @@ transform: translate(-50%, -50%); margin: 0; fill: $gray-900; - animation: logo-pulse 1.5s ease-in-out infinite; + animation: pulse 1.5s ease-in-out infinite; } diff --git a/client/dashboard/app/pulse.scss b/client/dashboard/app/pulse.scss new file mode 100644 index 000000000000..6b7637096b0b --- /dev/null +++ b/client/dashboard/app/pulse.scss @@ -0,0 +1,14 @@ +@keyframes pulse { + 0% { + opacity: 0.65; + filter: brightness(0.85); + } + 50% { + opacity: 1; + filter: brightness(1.15); + } + 100% { + opacity: 0.65; + filter: brightness(0.85); + } +} diff --git a/client/dashboard/app/router/plugins.tsx b/client/dashboard/app/router/plugins.tsx index b3b2e2f64573..0b920e65e579 100644 --- a/client/dashboard/app/router/plugins.tsx +++ b/client/dashboard/app/router/plugins.tsx @@ -82,7 +82,7 @@ export const pluginRoute = createRoute( { path: '$pluginId', loader: async () => { queryClient.ensureQueryData( marketplacePluginsQuery() ); - await queryClient.ensureQueryData( pluginsQuery() ); + queryClient.ensureQueryData( pluginsQuery() ); }, } ).lazy( () => import( '../../plugins/plugin' ).then( ( d ) => diff --git a/client/dashboard/plugins/plugin/index.tsx b/client/dashboard/plugins/plugin/index.tsx index afe80fd90aec..fb9af39c4ae7 100644 --- a/client/dashboard/plugins/plugin/index.tsx +++ b/client/dashboard/plugins/plugin/index.tsx @@ -12,6 +12,8 @@ import { SitesWithThisPlugin } from './sites-with-this-plugin'; import { SitesWithoutThisPlugin } from './sites-without-this-plugin'; import { usePlugin } from './use-plugin'; +import './style.scss'; + export default function Plugin() { const { pluginId: pluginSlug } = pluginRoute.useParams(); const { icon, isLoading, sitesWithThisPlugin, plugin } = usePlugin( pluginSlug ); @@ -27,6 +29,14 @@ export default function Plugin() { ); } + let decoration = null; + + if ( icon ) { + decoration = {; + } else if ( isLoading ) { + decoration =