feat: sync changes from v2 to v2-develop (#743)

Co-authored-by: ecarreras <294235+ecarreras@users.noreply.github.com>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gisce/react-ooui",
-  "version": "2.44.0",
+  "version": "2.45.0",
   "engines": {
     "node": "20.5.0"
   },
@@ -35,7 +35,7 @@
   "dependencies": {
     "@ant-design/plots": "^1.0.9",
     "@gisce/fiber-diagram": "2.1.1",
-    "@gisce/ooui": "2.20.0",
+    "@gisce/ooui": "2.21.0",
     "@gisce/react-formiga-components": "1.8.0",
     "@gisce/react-formiga-table": "1.8.5",
     "@monaco-editor/react": "^4.4.5",

src/locales/ca_ES.ts

@@ -107,4 +107,5 @@ export default {
   applyFilters: "Aplicar filtres",
   resetTableView: "Restablir vista de taula",
   not: "No",
+  loading: "Carregant...",
 };

src/locales/en_US.ts

@@ -103,4 +103,5 @@ export default {
   applyFilters: "Apply filters",
   resetTableView: "Reset table view",
   not: "Not",
+  loading: "Loading...",
 };

src/locales/es_ES.ts

@@ -109,4 +109,5 @@ export default {
   applyFilters: "Aplicar filtros",
   resetTableView: "Restablecer vista de tabla",
   not: "No",
+  loading: "Cargando...",
 };

src/widgets/containers/Group.tsx

@@ -1,8 +1,7 @@
 import React from "react";
 import { Group as GroupOoui } from "@gisce/ooui";
-import Container from "./Container";
-import { FieldSet } from "@gisce/react-formiga-components";
-import { Space } from "antd";
+import { Spinner } from "@/widgets/custom/Spinner";
+import { FieldSet , useLocale } from "@gisce/react-formiga-components";
 import iconMapper from "@/helpers/iconMapper";
 
 type Props = {
@@ -14,19 +13,21 @@ type Props = {
 function Group(props: Props): React.ReactElement {
   const { ooui, showLabel = true, responsiveBehaviour } = props;
   const icon: React.ElementType | undefined = iconMapper(ooui.icon || "");
-
+  const { t } = useLocale();
   return (
     <>
       {(ooui.label || icon) && showLabel ? (
         <FieldSet label={ooui.label} icon={icon}>
-          <Container
-            container={ooui!.container}
+          <Spinner
+            tip={t("loading")}
+            ooui={ooui}
             responsiveBehaviour={responsiveBehaviour}
           />
         </FieldSet>
       ) : (
-        <Container
-          container={ooui!.container}
+        <Spinner
+          tip={t("loading")}
+          ooui={ooui}
           responsiveBehaviour={responsiveBehaviour}
         />
       )}

src/widgets/custom/Spinner.tsx

@@ -1,19 +1,23 @@
-import React from "react";
 import { WidgetProps } from "@/types";
 import { Spinner as SpinnerOoui } from "@gisce/ooui";
 import { Spin } from "antd";
 import Container from "@/widgets/containers/Container";
 
-type SpinnerProps = WidgetProps & {
+type SpinnerProps = Omit<WidgetProps, "ooui"> & {
   ooui: SpinnerOoui;
+  responsiveBehaviour?: boolean;
+  tip?: string;
 };
 
 export const Spinner = (props: SpinnerProps) => {
-  const { ooui } = props;
+  const { ooui, responsiveBehaviour = false, tip } = props;
 
   return (
-    <Spin tip={ooui.label} size="large" spinning={ooui.loading}>
-      <Container container={ooui.container} responsiveBehaviour={false} />
+    <Spin tip={tip ?? ooui.label} size="large" spinning={ooui.loading}>
+      <Container
+        container={ooui.container}
+        responsiveBehaviour={responsiveBehaviour}
+      />
     </Spin>
   );
 };