I10663 (#10770)

* #10663 Add new full screen spinner componetn

* #10633 Locale key for Refreshing data

* #10663 Fix merging mistake

js/load.js

@@ -39,6 +39,8 @@ import PanelSection from '@/components/Panel/PanelSection.vue';
 import PkpButton from '@/components/Button/Button.vue';
 import PkpHeader from '@/components/Header/Header.vue';
 import Spinner from '@/components/Spinner/Spinner.vue';
+import SpinnerFullScreen from '@/components/Spinner/SpinnerFullScreen.vue';
+
 import Step from '@/components/Steps/Step.vue';
 import Steps from '@/components/Steps/Steps.vue';
 import Tab from '@/components/Tabs/Tab.vue';
@@ -134,6 +136,8 @@ VueRegistry.registerComponent('PkpButton', PkpButton);
 VueRegistry.registerComponent('PkpHeader', PkpHeader);
 VueRegistry.registerComponent('Spinner', Spinner);
 VueRegistry.registerComponent('PkpSpinner', Spinner);
+VueRegistry.registerComponent('PkpSpinnerFullScreen', SpinnerFullScreen);
+
 VueRegistry.registerComponent('Step', Step);
 VueRegistry.registerComponent('PkpStep', Step);
 VueRegistry.registerComponent('Steps', Steps);

locale/en/common.po

@@ -2346,3 +2346,6 @@ msgstr "{$from} – {$until}"
 
 msgid "common.numero"
 msgstr "No"
+
+msgid "common.refreshingData"
+msgstr "Refreshing data"

templates/layouts/backend.tpl

@@ -36,6 +36,7 @@
 		{rdelim});
 	</script>
 	<div id="app" class="app {if $isLoggedInAs} app--isLoggedInAs{/if}" v-cloak>
+		<pkp-spinner-full-screen></pkp-spinner-full-screen>
 		<vue-announcer class="sr-only"></vue-announcer>
 		<pkp-announcer class="sr-only"></pkp-announcer>
 		<modal-manager></modal-manager>
@@ -161,7 +162,6 @@
 				<pkp-side-nav :links="menu" aria-label="{translate key="common.navigation.site"}">
 				</pkp-side-nav>
 			{/block}
-
 			<main class="app__main">
 				<div class="app__page width{if $pageWidth} width--{$pageWidth}{/if}">
 					{block name="breadcrumbs"}