@soppiya/app-bridge 1.2.1 → 1.2.2

package/dist/components/articles-picker/model/useArticles.js

@@ -1,17 +1,20 @@
+import { NetworkStatus } from "@apollo/client";
 import { useQuery } from "@apollo/client/react";
 import { articlesQuery } from "../api/query.js";
 const userArticles = (props = {})=>{
     const { first, query, filterKeys, skip } = props;
-    const { data, loading: isLoadingArticles, error, fetchMore } = useQuery(articlesQuery, {
+    const { data, error, networkStatus, fetchMore } = useQuery(articlesQuery, {
         skip,
         variables: {
             first,
             query,
             filterKeys
-        }
+        },
+        notifyOnNetworkStatusChange: true
     });
     const articles = data?.articles?.edges?.map((edge)=>edge?.node).filter((node)=>null != node);
     const pageInfo = data?.articles?.pageInfo;
+    const isLoadingArticles = networkStatus === NetworkStatus.loading;
     const fetchMoreArticles = ()=>{
         if (!pageInfo?.hasNextPage) return;
         fetchMore({

package/dist/components/blogs-picker/model/useBlogs.js

@@ -1,17 +1,20 @@
+import { NetworkStatus } from "@apollo/client";
 import { useQuery } from "@apollo/client/react";
 import { blogsQuery } from "../api/query.js";
 const useBlogs = (props = {})=>{
     const { first, skip, query, filterKeys } = props;
-    const { data, loading: isLoadingBlogs, error, fetchMore } = useQuery(blogsQuery, {
+    const { data, error, networkStatus, fetchMore } = useQuery(blogsQuery, {
         skip,
         variables: {
             first,
             query,
             filterKeys
-        }
+        },
+        notifyOnNetworkStatusChange: true
     });
     const blogs = data?.blogs?.edges?.map((edge)=>edge?.node).filter((node)=>null != node);
     const pageInfo = data?.blogs?.pageInfo;
+    const isLoadingBlogs = networkStatus === NetworkStatus.loading;
     const fetchMoreBlogs = ()=>{
         if (!pageInfo?.hasNextPage) return;
         fetchMore({

package/dist/components/collections-pciker/model/useCollections.js

@@ -1,16 +1,19 @@
+import { NetworkStatus } from "@apollo/client";
 import { useQuery } from "@apollo/client/react";
 import { collectionQuery } from "../api/query.js";
 const useCollections = (props = {})=>{
     const { skip, query, filterKeys } = props;
-    const { data, loading: isLoadingCollections, error, fetchMore } = useQuery(collectionQuery, {
+    const { data, error, networkStatus, fetchMore } = useQuery(collectionQuery, {
         skip,
         variables: {
             filterKeys,
             query
-        }
+        },
+        notifyOnNetworkStatusChange: true
     });
     const collections = data?.collections?.edges?.map((edge)=>edge?.node)?.filter((node)=>null != node);
     const pageInfo = data?.collections?.pageInfo;
+    const isLoadingCollections = networkStatus === NetworkStatus.loading;
     const fetchMoreCollections = ()=>{
         if (!pageInfo?.hasNextPage) return;
         fetchMore({

package/dist/components/country-picker/model/{useContry.d.ts → useCountries.d.ts}

@@ -5,13 +5,13 @@ type Props = {
     query?: string | null;
     filterKeys?: _CountryFilterKeys | null;
 };
-export declare const useCountry: (props?: Props) => {
+export declare const useCountries: (props?: Props) => {
     countries: {
         __typename: "_Country";
         _id?: string | null;
         name?: string | null;
         flag?: string | null;
-    }[];
+    }[] | undefined;
     pageInfo: {
         __typename: "PageInfo";
         endCursor?: string | null;

package/dist/components/country-picker/model/{useContry.js → useCountries.js}

@@ -1,19 +1,20 @@
+import { NetworkStatus } from "@apollo/client";
 import { useQuery } from "@apollo/client/react";
-import { useRef } from "react";
 import { countryQuery } from "../api/query.js";
-const useCountry = (props = {})=>{
+const useCountries = (props = {})=>{
     const { skip, first, query, filterKeys } = props;
-    const refArray = useRef([]);
-    const { data, loading: isLoadingCountry, error, fetchMore } = useQuery(countryQuery, {
+    const { data, error, networkStatus, fetchMore } = useQuery(countryQuery, {
         skip,
         variables: {
             first,
             query,
             filterKeys
-        }
+        },
+        notifyOnNetworkStatusChange: true
     });
-    const countries = data?._countries?.edges?.map((edge)=>edge?.node).filter((node)=>null != node) ?? refArray.current;
+    const countries = data?._countries?.edges?.map((edge)=>edge?.node).filter((node)=>null != node);
     const pageInfo = data?._countries?.pageInfo;
+    const isLoadingCountry = networkStatus === NetworkStatus.loading;
     const fetchMoreCountries = ()=>{
         if (!pageInfo?.hasNextPage) return;
         fetchMore({
@@ -45,4 +46,4 @@ const useCountry = (props = {})=>{
         fetchMoreCountries
     };
 };
-export { useCountry };
+export { useCountries };

package/dist/components/country-picker/ui/CountryPicker.d.ts

@@ -6,5 +6,5 @@ type Props = {
     onClose?: () => void;
     onOk?: (countries: string[]) => void;
 };
-declare const CountryPicker: ({ title, initialIds, limit, okButtonLoading, onClose, onOk }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const CountryPicker: ({ title, initialIds, limit, okButtonLoading, onClose, onOk, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default CountryPicker;

package/dist/components/country-picker/ui/CountryPicker.js

@@ -5,11 +5,11 @@ import { BlockStack, Box, Button, Checkbox, Image, InlineStack, Input, Modal, Sp
 import classnames from "classnames";
 import lodash from "lodash";
 import { useState } from "react";
-import { useCountry } from "../model/useContry.js";
+import { useCountries } from "../model/useCountries.js";
 const CountryPicker = ({ title = "Countries", initialIds = [], limit = 1 / 0, okButtonLoading, onClose, onOk })=>{
     const [selectedCustomer, setSelectedCustomer] = useState(initialIds);
     const { query, debounceQuery, onChangeQuery } = useFilterQuery();
-    const { countries, pageInfo, isLoadingCountry, fetchMoreCountries } = useCountry({
+    const { countries, pageInfo, isLoadingCountry, fetchMoreCountries } = useCountries({
         first: 20,
         query: debounceQuery
     });
@@ -61,10 +61,10 @@ const CountryPicker = ({ title = "Countries", initialIds = [], limit = 1 / 0, ok
                     })
                 }) : /*#__PURE__*/ jsxs(BlockStack, {
                     children: [
-                        countries.map((country)=>/*#__PURE__*/ jsx(InlineStack, {
+                        countries?.map((country)=>/*#__PURE__*/ jsx(InlineStack, {
                                 stack: "full",
-                                className: classnames('lg:cursor-pointer border-t border-t-[#ebebeb]!', {
-                                    'bg-[#f1f1f1ab] cursor-default!': !selectedCustomer.includes(country._id) && isReached
+                                className: classnames("lg:cursor-pointer border-t border-t-[#ebebeb]!", {
+                                    "bg-[#f1f1f1ab] cursor-default!": !selectedCustomer.includes(country._id) && isReached
                                 }),
                                 gapX: 60,
                                 padding: 60,

package/dist/components/country-picker/ui/CountryPicker.stories.d.ts

@@ -1,6 +1,6 @@
 declare const meta: {
     title: string;
-    component: ({ title, initialIds, limit, okButtonLoading, onClose, onOk }: {
+    component: ({ title, initialIds, limit, okButtonLoading, onClose, onOk, }: {
         title?: string;
         initialIds?: string[];
         limit?: number;

package/dist/components/customers-picker/model/useCustomers.d.ts

@@ -15,7 +15,7 @@ export declare const useCustomers: (props?: Props) => {
             __typename: "CustomerEmail";
             address?: string | null;
         } | null;
-    }[];
+    }[] | undefined;
     pageInfo: {
         __typename: "PageInfo";
         endCursor?: string | null;

package/dist/components/customers-picker/model/useCustomers.js

@@ -1,19 +1,20 @@
+import { NetworkStatus } from "@apollo/client";
 import { useQuery } from "@apollo/client/react";
-import { useRef } from "react";
 import { customersQuery } from "../api/query.js";
 const useCustomers = (props = {})=>{
     const { skip, first, query, filterKeys } = props;
-    const refArray = useRef([]);
-    const { data, loading: isLoadingCustomers, error, fetchMore } = useQuery(customersQuery, {
+    const { data, error, networkStatus, fetchMore } = useQuery(customersQuery, {
         skip,
         variables: {
             first,
             query,
             filterKeys
-        }
+        },
+        notifyOnNetworkStatusChange: true
     });
     const pageInfo = data?.customers?.pageInfo;
-    const customers = data?.customers?.edges?.map((edge)=>edge?.node).filter((node)=>null != node) ?? refArray.current;
+    const isLoadingCustomers = networkStatus === NetworkStatus.loading;
+    const customers = data?.customers?.edges?.map((edge)=>edge?.node).filter((node)=>null != node);
     const fetchMoreCustomers = ()=>{
         if (!pageInfo?.hasNextPage) return;
         fetchMore({

package/dist/components/customers-picker/ui/CustomersPicker.d.ts

@@ -6,5 +6,5 @@ type Props = {
     onClose?: () => void;
     onOk?: (customers: string[]) => void;
 };
-declare const CustomersPicker: ({ title, initialIds, limit, okButtonLoading, onClose, onOk }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const CustomersPicker: ({ title, initialIds, limit, okButtonLoading, onClose, onOk, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default CustomersPicker;

package/dist/components/customers-picker/ui/CustomersPicker.js

@@ -61,10 +61,10 @@ const CustomersPicker = ({ title = "Customers", initialIds = [], limit = 1 / 0,
                     })
                 }) : /*#__PURE__*/ jsxs(BlockStack, {
                     children: [
-                        customers.map((customer)=>/*#__PURE__*/ jsx(InlineStack, {
+                        customers?.map((customer)=>/*#__PURE__*/ jsx(InlineStack, {
                                 stack: "full",
-                                className: classnames('lg:cursor-pointer border-t border-t-[#ebebeb]!', {
-                                    'bg-[#f1f1f1ab] cursor-default!': !selectedCustomer.includes(customer._id) && isReached
+                                className: classnames("lg:cursor-pointer border-t border-t-[#ebebeb]!", {
+                                    "bg-[#f1f1f1ab] cursor-default!": !selectedCustomer.includes(customer._id) && isReached
                                 }),
                                 gapX: 60,
                                 padding: 60,

package/dist/components/customers-picker/ui/CustomersPicker.stories.d.ts

@@ -1,6 +1,6 @@
 declare const meta: {
     title: string;
-    component: ({ title, initialIds, limit, okButtonLoading, onClose, onOk }: {
+    component: ({ title, initialIds, limit, okButtonLoading, onClose, onOk, }: {
         title?: string;
         initialIds?: string[];
         limit?: number;

package/dist/components/link-list-picker/model/useLinkList.js

@@ -1,17 +1,20 @@
+import { NetworkStatus } from "@apollo/client";
 import { useQuery } from "@apollo/client/react";
 import { linkListQuery } from "../api/query.js";
 const useLinklist = (props = {})=>{
     const { skip, first, query, filterKeys } = props;
-    const { data, loading: isLoadingLinklist, error, fetchMore } = useQuery(linkListQuery, {
+    const { data, error, networkStatus, fetchMore } = useQuery(linkListQuery, {
         skip,
         variables: {
             first,
             query,
             filterKeys
-        }
+        },
+        notifyOnNetworkStatusChange: true
     });
     const linklists = data?.linklists?.edges?.map((edge)=>edge?.node).filter((node)=>null != node);
     const pageInfo = data?.linklists?.pageInfo;
+    const isLoadingLinklist = networkStatus === NetworkStatus.loading;
     const fetchMoreLinklists = ()=>{
         if (!pageInfo?.hasNextPage) return;
         fetchMore({

package/dist/components/link-list-picker/ui/LinkListPicker.d.ts

@@ -6,5 +6,5 @@ type Props = {
     onClose?: () => void;
     onOk?: (linklist: string[]) => void;
 };
-declare const LinkListPicker: ({ title, initialIds, limit, okButtonLoading, onClose, onOk }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const LinkListPicker: ({ title, initialIds, limit, okButtonLoading, onClose, onOk, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default LinkListPicker;

package/dist/components/link-list-picker/ui/LinkListPicker.js

@@ -62,8 +62,8 @@ const LinkListPicker = ({ title = "Linklist", initialIds = [], limit = 1 / 0, ok
                     children: [
                         linklists?.map((linklist)=>/*#__PURE__*/ jsxs(InlineStack, {
                                 stack: "full",
-                                className: classnames('lg:cursor-pointer border-t border-t-[#ebebeb]!', {
-                                    'bg-[#f1f1f1ab] cursor-default!': !selectedLinklist.includes(linklist._id) && isReached
+                                className: classnames("lg:cursor-pointer border-t border-t-[#ebebeb]!", {
+                                    "bg-[#f1f1f1ab] cursor-default!": !selectedLinklist.includes(linklist._id) && isReached
                                 }),
                                 gapX: 60,
                                 padding: 60,

package/dist/components/link-list-picker/ui/LinkListPicker.stories.d.ts

@@ -1,6 +1,6 @@
 declare const meta: {
     title: string;
-    component: ({ title, initialIds, limit, okButtonLoading, onClose, onOk }: {
+    component: ({ title, initialIds, limit, okButtonLoading, onClose, onOk, }: {
         title?: string;
         initialIds?: string[];
         limit?: number;

package/dist/components/meta-data/ui/VariantRefMetaField.d.ts

@@ -1,3 +1,3 @@
 import { MetaDataProps } from "./MetaDataItem";
-declare const VariantRefMetaField: ({ value, children }: MetaDataProps) => import("react/jsx-runtime").JSX.Element | import("react/jsx-runtime").JSX.Element[];
+declare const VariantRefMetaField: ({ value, children }: MetaDataProps) => import("react/jsx-runtime").JSX.Element | import("react/jsx-runtime").JSX.Element[] | undefined;
 export default VariantRefMetaField;

package/dist/components/metaobjects-entries-picker/model/useMetaobjectEntries.js

@@ -1,17 +1,20 @@
+import { NetworkStatus } from "@apollo/client";
 import { useQuery } from "@apollo/client/react";
 import { metaobjectEntriesQuery } from "../api/query.js";
 const useMetaobjectEntries = (props = {})=>{
     const { skip, first, query, filterKeys } = props;
-    const { data, loading: isLoadingMetaobjectEntries, error, fetchMore } = useQuery(metaobjectEntriesQuery, {
+    const { data, error, networkStatus, fetchMore } = useQuery(metaobjectEntriesQuery, {
         skip,
         variables: {
             first,
             query,
             filterKeys
-        }
+        },
+        notifyOnNetworkStatusChange: true
     });
     const metaobjectEntries = data?.metaobjectEntries?.edges?.map((edge)=>edge?.node).filter((node)=>null != node);
     const pageInfo = data?.metaobjectEntries?.pageInfo;
+    const isLoadingMetaobjectEntries = networkStatus === NetworkStatus.loading;
     const fetchMoreMetaobjectEntries = ()=>{
         if (!pageInfo?.hasNextPage) return;
         fetchMore({

package/dist/components/metaobjects-entries-picker/ui/MetaobjectEntriesPicker.d.ts

@@ -7,5 +7,5 @@ type Props = {
     onClose?: () => void;
     onOk?: (metaobjectEntries: string[]) => void;
 };
-declare const MetaobjectEntriesPicker: ({ title, initialIds, limit, metaobjects, okButtonLoading, onClose, onOk }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const MetaobjectEntriesPicker: ({ title, initialIds, limit, metaobjects, okButtonLoading, onClose, onOk, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default MetaobjectEntriesPicker;

package/dist/components/metaobjects-entries-picker/ui/MetaobjectEntriesPicker.js

@@ -65,8 +65,8 @@ const MetaobjectEntriesPicker = ({ title = "Metaobject entries", initialIds = []
                     children: [
                         metaobjectEntries?.map((metaobjectEntry)=>/*#__PURE__*/ jsxs(InlineStack, {
                                 stack: "full",
-                                className: classnames('lg:cursor-pointer border-t border-t-[#ebebeb]!', {
-                                    'bg-[#f1f1f1ab] cursor-default!': !selectedMetaobjectEntries.includes(metaobjectEntry._id) && isReached
+                                className: classnames("lg:cursor-pointer border-t border-t-[#ebebeb]!", {
+                                    "bg-[#f1f1f1ab] cursor-default!": !selectedMetaobjectEntries.includes(metaobjectEntry._id) && isReached
                                 }),
                                 gapX: 60,
                                 padding: 60,

package/dist/components/metaobjects-entries-picker/ui/MetaobjectEntriesPicker.stories.d.ts

@@ -1,6 +1,6 @@
 declare const meta: {
     title: string;
-    component: ({ title, initialIds, limit, metaobjects, okButtonLoading, onClose, onOk }: {
+    component: ({ title, initialIds, limit, metaobjects, okButtonLoading, onClose, onOk, }: {
         title?: string;
         initialIds?: string[];
         limit?: number;

package/dist/components/metaobjects-picker/model/useMetaobjects.js

@@ -1,17 +1,20 @@
+import { NetworkStatus } from "@apollo/client";
 import { useQuery } from "@apollo/client/react";
 import { metaobjectQuery } from "../api/query.js";
 const useMetaobjects = (props = {})=>{
     const { skip, first, query, filterKeys } = props;
-    const { data, loading: isMetaobjectsLoading, error, fetchMore } = useQuery(metaobjectQuery, {
+    const { data, networkStatus, fetchMore } = useQuery(metaobjectQuery, {
         skip,
         variables: {
             first,
             query,
             filterKeys
-        }
+        },
+        notifyOnNetworkStatusChange: true
     });
     const metaobjects = data?.metaobjects?.edges?.map((edge)=>edge?.node).filter((node)=>null != node);
     const pageInfo = data?.metaobjects?.pageInfo;
+    const isMetaobjectsLoading = networkStatus === NetworkStatus.loading;
     const fetchMoreMetaobjects = ()=>{
         if (!pageInfo?.hasNextPage) return;
         fetchMore({

package/dist/components/pages-picker/model/usePages.js

@@ -1,17 +1,20 @@
+import { NetworkStatus } from "@apollo/client";
 import { useQuery } from "@apollo/client/react";
 import { pagesQuery } from "../api/query.js";
 const usePages = (props = {})=>{
     const { skip, first, query, filterKeys } = props;
-    const { data, loading: isLoadingPages, error, fetchMore } = useQuery(pagesQuery, {
+    const { data, error, networkStatus, fetchMore } = useQuery(pagesQuery, {
         skip,
         variables: {
             first,
             query,
             filterKeys
-        }
+        },
+        notifyOnNetworkStatusChange: true
     });
     const pages = data?.pages?.edges?.map((edge)=>edge?.node).filter((node)=>null != node);
     const pageInfo = data?.pages?.pageInfo;
+    const isLoadingPages = networkStatus === NetworkStatus.loading;
     const fetchMorePages = ()=>{
         if (!pageInfo?.hasNextPage) return;
         fetchMore({

package/dist/components/pages-picker/ui/PagesPicker.js

@@ -62,8 +62,8 @@ const PagesPicker = ({ title = "Pages", initialIds = [], limit = 1 / 0, okButton
                     children: [
                         pages?.map((page)=>/*#__PURE__*/ jsxs(InlineStack, {
                                 stack: "full",
-                                className: classnames('lg:cursor-pointer border-t border-t-[#ebebeb]!', {
-                                    'bg-[#f1f1f1ab] cursor-default!': !selectedPage.includes(page._id) && isReached
+                                className: classnames("lg:cursor-pointer border-t border-t-[#ebebeb]!", {
+                                    "bg-[#f1f1f1ab] cursor-default!": !selectedPage.includes(page._id) && isReached
                                 }),
                                 gapX: 60,
                                 padding: 60,

package/dist/components/products-picker/model/useProducts.js

@@ -1,17 +1,20 @@
+import { NetworkStatus } from "@apollo/client";
 import { useQuery } from "@apollo/client/react";
 import { productsQuery } from "../api/query.js";
 const useProducts = (props = {})=>{
     const { first, query, filterKeys, skip } = props;
-    const { data, loading: isLoadingProducts, error, fetchMore } = useQuery(productsQuery, {
+    const { data, error, networkStatus, fetchMore } = useQuery(productsQuery, {
         skip,
         variables: {
             first,
             query,
             filterKeys
-        }
+        },
+        notifyOnNetworkStatusChange: true
     });
     const products = data?.products?.edges?.map((edge)=>edge?.node).filter((node)=>null != node);
     const pageInfo = data?.products?.pageInfo;
+    const isLoadingProducts = networkStatus === NetworkStatus.loading;
     const fetchMoreProducts = ()=>{
         if (!pageInfo?.hasNextPage) return;
         fetchMore({

package/dist/components/products-picker/ui/ProductPicker.d.ts

@@ -6,5 +6,5 @@ type Props = {
     onClose?: () => void;
     onOk?: (products: string[]) => void;
 };
-declare const ProductsPicker: ({ title, initialIds, limit, okButtonLoading, onClose, onOk }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const ProductsPicker: ({ title, initialIds, limit, okButtonLoading, onClose, onOk, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default ProductsPicker;

package/dist/components/products-picker/ui/ProductPicker.js

@@ -63,8 +63,8 @@ const ProductsPicker = ({ title = "Products", initialIds = [], limit = 1 / 0, ok
                     children: [
                         products?.map((product)=>/*#__PURE__*/ jsxs(InlineStack, {
                                 stack: "full",
-                                className: classnames('lg:cursor-pointer border-t border-t-[#ebebeb]!', {
-                                    'bg-[#f1f1f1ab] cursor-default!': !selectedProduct.includes(product._id) && isReached
+                                className: classnames("lg:cursor-pointer border-t border-t-[#ebebeb]!", {
+                                    "bg-[#f1f1f1ab] cursor-default!": !selectedProduct.includes(product._id) && isReached
                                 }),
                                 gapX: 60,
                                 padding: 60,

package/dist/components/products-picker/ui/ProductsPicker.stories.d.ts

@@ -1,6 +1,6 @@
 declare const meta: {
     title: string;
-    component: ({ title, initialIds, limit, okButtonLoading, onClose, onOk }: {
+    component: ({ title, initialIds, limit, okButtonLoading, onClose, onOk, }: {
         title?: string;
         initialIds?: string[];
         limit?: number;

package/dist/components/region-picker/model/useRegion.d.ts

@@ -10,7 +10,7 @@ export declare const useRegion: (props?: Props) => {
         __typename: "_Region";
         _id?: string | null;
         name?: string | null;
-    }[];
+    }[] | undefined;
     pageInfo: {
         __typename: "PageInfo";
         endCursor?: string | null;

package/dist/components/region-picker/model/useRegion.js

@@ -1,19 +1,20 @@
+import { NetworkStatus } from "@apollo/client";
 import { useQuery } from "@apollo/client/react";
-import { useRef } from "react";
 import { regionQuery } from "../api/query.js";
 const useRegion = (props = {})=>{
     const { skip, first, query, filterKeys } = props;
-    const refArray = useRef([]);
-    const { data, loading: isLoadingRegion, error, fetchMore } = useQuery(regionQuery, {
+    const { data, error, networkStatus, fetchMore } = useQuery(regionQuery, {
         skip,
         variables: {
             first,
             query,
             filterKeys
-        }
+        },
+        notifyOnNetworkStatusChange: true
     });
-    const regions = data?._regions?.edges?.map((edge)=>edge?.node).filter((node)=>null != node) ?? refArray.current;
+    const regions = data?._regions?.edges?.map((edge)=>edge?.node).filter((node)=>null != node);
     const pageInfo = data?._regions?.pageInfo;
+    const isLoadingRegion = networkStatus === NetworkStatus.loading;
     const fetchMoreRegions = ()=>{
         if (!pageInfo?.hasNextPage) return;
         fetchMore({
@@ -25,6 +26,7 @@ const useRegion = (props = {})=>{
             },
             updateQuery (prev, { fetchMoreResult }) {
                 if (!fetchMoreResult._regions?.edges || !prev._regions?.edges) return prev;
+                console.log(fetchMoreResult._regions);
                 return {
                     _regions: {
                         ...fetchMoreResult._regions,

package/dist/components/region-picker/ui/RegionPicker.js

@@ -9,7 +9,7 @@ import { useRegion } from "../model/useRegion.js";
 const RegionPicker = ({ title, initialIds, countries, limit = 1 / 0, okButtonLoading, onClose, onOk })=>{
     const [selectedRegion, setSelectedRegion] = useState(initialIds ?? []);
     const { query, debounceQuery, onChangeQuery } = useFilterQuery();
-    const { regions, pageInfo, isLoadingRegion, fetchMoreRegions, error } = useRegion({
+    const { regions, pageInfo, isLoadingRegion, fetchMoreRegions } = useRegion({
         first: 20,
         query: debounceQuery,
         filterKeys: {
@@ -64,10 +64,10 @@ const RegionPicker = ({ title, initialIds, countries, limit = 1 / 0, okButtonLoa
                     })
                 }) : /*#__PURE__*/ jsxs(BlockStack, {
                     children: [
-                        regions.map((region)=>/*#__PURE__*/ jsx(InlineStack, {
+                        regions?.map((region)=>/*#__PURE__*/ jsx(InlineStack, {
                                 stack: "full",
-                                className: classnames('lg:cursor-pointer border-t border-t-[#ebebeb]!', {
-                                    'bg-[#f1f1f1ab] cursor-default!': !selectedRegion.includes(region._id) && isReached
+                                className: classnames("lg:cursor-pointer border-t border-t-[#ebebeb]!", {
+                                    "bg-[#f1f1f1ab] cursor-default!": !selectedRegion.includes(region._id) && isReached
                                 }),
                                 gapX: 60,
                                 padding: 60,

package/dist/components/segments-picker/api/query.js

@@ -1,18 +1,34 @@
 import { graphql } from "../../../shared/graphql/index.js";
-const segmentsQuery = graphql(`query CustomerSegments($after: ID, $before: ID, $first: Int, $last: Int, $query: String, $filterKeys: CustomerSegmentFilterKeys) {
-  customerSegments(after: $after, before: $before, first: $first, last: $last, query: $query, filterKeys: $filterKeys) {
-    pageInfo {
-      endCursor
-      hasNextPage
-      hasPreviousPage
-      startCursor
-    }
-    edges {
-      node {
-        _id
-        title
+const segmentsQuery = graphql(`
+  query CustomerSegments(
+    $after: ID
+    $before: ID
+    $first: Int
+    $last: Int
+    $query: String
+    $filterKeys: CustomerSegmentFilterKeys
+  ) {
+    customerSegments(
+      after: $after
+      before: $before
+      first: $first
+      last: $last
+      query: $query
+      filterKeys: $filterKeys
+    ) {
+      pageInfo {
+        endCursor
+        hasNextPage
+        hasPreviousPage
+        startCursor
+      }
+      edges {
+        node {
+          _id
+          title
+        }
       }
     }
   }
-}`);
+`);
 export { segmentsQuery };

package/dist/components/segments-picker/model/useSegments.d.ts

@@ -10,7 +10,7 @@ export declare const useSegments: (props?: Props) => {
         __typename: "CustomerSegment";
         _id?: string | null;
         title?: string | null;
-    }[];
+    }[] | undefined;
     pageInfo: {
         __typename: "PageInfo";
         endCursor?: string | null;

package/dist/components/segments-picker/model/useSegments.js

@@ -1,19 +1,20 @@
+import { NetworkStatus } from "@apollo/client";
 import { useQuery } from "@apollo/client/react";
-import { useRef } from "react";
 import { segmentsQuery } from "../api/query.js";
 const useSegments = (props = {})=>{
     const { skip, first, query, filterKeys } = props;
-    const refArray = useRef([]);
-    const { data, loading: isLoadingSegments, error, fetchMore } = useQuery(segmentsQuery, {
+    const { data, error, networkStatus, fetchMore } = useQuery(segmentsQuery, {
         skip,
         variables: {
             first,
             query,
             filterKeys
-        }
+        },
+        notifyOnNetworkStatusChange: true
     });
+    const segments = data?.customerSegments?.edges?.map((edge)=>edge?.node).filter((node)=>null != node);
     const pageInfo = data?.customerSegments?.pageInfo;
-    const segments = data?.customerSegments?.edges?.map((edge)=>edge?.node).filter((node)=>null != node) ?? refArray.current;
+    const isLoadingSegments = networkStatus === NetworkStatus.loading;
     const fetchMoreSegments = ()=>{
         if (!pageInfo?.hasNextPage) return;
         fetchMore({

package/dist/components/segments-picker/ui/SegmentsPicker.d.ts

@@ -6,5 +6,5 @@ type Props = {
     onClose?: () => void;
     onOk?: (customers: string[]) => void;
 };
-declare const SegmentPicker: ({ title, initialIds, limit, okButtonLoading, onClose, onOk }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const SegmentPicker: ({ title, initialIds, limit, okButtonLoading, onClose, onOk, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default SegmentPicker;

package/dist/components/segments-picker/ui/SegmentsPicker.js

@@ -61,10 +61,10 @@ const SegmentPicker = ({ title = "Segments", initialIds = [], limit = 1 / 0, okB
                     })
                 }) : /*#__PURE__*/ jsxs(BlockStack, {
                     children: [
-                        segments.map((segment)=>/*#__PURE__*/ jsx(InlineStack, {
+                        segments?.map((segment)=>/*#__PURE__*/ jsx(InlineStack, {
                                 stack: "full",
-                                className: classnames('lg:cursor-pointer border-t border-t-[#ebebeb]!', {
-                                    'bg-[#f1f1f1ab] cursor-default!': !selectedSegment.includes(segment._id) && isReached
+                                className: classnames("lg:cursor-pointer border-t border-t-[#ebebeb]!", {
+                                    "bg-[#f1f1f1ab] cursor-default!": !selectedSegment.includes(segment._id) && isReached
                                 }),
                                 gapX: 60,
                                 padding: 60,

package/dist/components/segments-picker/ui/SegmentsPicker.stories.d.ts

@@ -1,6 +1,6 @@
 declare const meta: {
     title: string;
-    component: ({ title, initialIds, limit, okButtonLoading, onClose, onOk }: {
+    component: ({ title, initialIds, limit, okButtonLoading, onClose, onOk, }: {
         title?: string;
         initialIds?: string[];
         limit?: number;

package/dist/components/variants-picker/model/useVariants.d.ts

@@ -22,7 +22,7 @@ export declare const useVariants: (props?: Props) => {
             _id?: string | null;
             title?: string | null;
         } | null;
-    }[];
+    }[] | undefined;
     pageInfo: {
         __typename: "PageInfo";
         endCursor?: string | null;

package/dist/components/variants-picker/model/useVariants.js

@@ -1,18 +1,18 @@
+import { NetworkStatus } from "@apollo/client";
 import { useQuery } from "@apollo/client/react";
-import { useRef } from "react";
 import { variantsQuery } from "../api/query.js";
 const useVariants = (props = {})=>{
     const { skip, first, query, filterKeys } = props;
-    const refArray = useRef([]);
-    const { data, loading: isLoadingVariants, error, fetchMore } = useQuery(variantsQuery, {
+    const { data, error, networkStatus, fetchMore } = useQuery(variantsQuery, {
         skip,
         variables: {
             first,
             query,
             filterKeys
-        }
+        },
+        notifyOnNetworkStatusChange: true
     });
-    const variants = data?.variants?.edges?.map((edge)=>edge?.node).filter((node)=>null != node) ?? refArray.current;
+    const variants = data?.variants?.edges?.map((edge)=>edge?.node).filter((node)=>null != node);
     const pageInfo = data?.variants?.pageInfo;
     const fetchMoreVariants = ()=>{
         if (!pageInfo?.hasNextPage) return;
@@ -37,6 +37,7 @@ const useVariants = (props = {})=>{
             }
         });
     };
+    const isLoadingVariants = networkStatus === NetworkStatus.loading;
     return {
         variants,
         pageInfo,

package/dist/components/variants-picker/ui/VariantsPicker.js

@@ -61,7 +61,7 @@ const VariantsPicker = ({ title = "Variants", initialIds = [], limit = 1 / 0, ok
                     })
                 }) : /*#__PURE__*/ jsxs(BlockStack, {
                     children: [
-                        variants.map((variant)=>/*#__PURE__*/ jsxs(InlineStack, {
+                        variants?.map((variant)=>/*#__PURE__*/ jsxs(InlineStack, {
                                 stack: "full",
                                 className: classnames('lg:cursor-pointer border-t border-t-[#ebebeb]!', {
                                     'bg-[#f1f1f1ab] cursor-default!': !selectedVariant.includes(variant._id) && isReached

package/dist/shared/graphql/gql.d.ts

@@ -29,7 +29,7 @@ type Documents = {
     "query Pages($filterKeys: PageFilterKeys, $after: ID, $before: ID, $first: Int, $last: Int, $query: String) {\n  pages(filterKeys: $filterKeys, after: $after, before: $before, first: $first, last: $last, query: $query) {\n    pageInfo {\n      endCursor\n      hasNextPage\n      hasPreviousPage\n      startCursor\n    }\n    edges {\n      node {\n        _id\n        title\n        image {\n          _id\n          url\n        }\n      }\n    }\n  }\n}": typeof types.PagesDocument;
     "\n  query Products($after: ID, $before: ID, $first: Int, $last: Int, $query: String,$filterKeys: ProductFilterKeys) {\n    products(after: $after, before: $before, first: $first, last: $last, query: $query,filterKeys: $filterKeys) {\n      pageInfo {\n        endCursor\n        hasNextPage\n        hasPreviousPage\n        startCursor\n      }\n      edges {\n        node {\n          _id\n          title\n          image {\n            _id\n            url\n          }\n        }\n      }\n    }\n  }\n": typeof types.ProductsDocument;
     "query _regions($filterKeys: _RegionFilterKeys, $query: String, $after: ID, $before: ID, $first: Int, $last: Int) {\n  _regions(filterKeys: $filterKeys, query: $query, after: $after, before: $before, first: $first, last: $last) {\n    pageInfo {\n      endCursor\n      hasNextPage\n      hasPreviousPage\n      startCursor\n    }\n    edges {\n      node {\n        _id\n        name\n      }\n    }\n  }\n}": typeof types._RegionsDocument;
-    "query CustomerSegments($after: ID, $before: ID, $first: Int, $last: Int, $query: String, $filterKeys: CustomerSegmentFilterKeys) {\n  customerSegments(after: $after, before: $before, first: $first, last: $last, query: $query, filterKeys: $filterKeys) {\n    pageInfo {\n      endCursor\n      hasNextPage\n      hasPreviousPage\n      startCursor\n    }\n    edges {\n      node {\n        _id\n        title\n      }\n    }\n  }\n}": typeof types.CustomerSegmentsDocument;
+    "\n  query CustomerSegments(\n    $after: ID\n    $before: ID\n    $first: Int\n    $last: Int\n    $query: String\n    $filterKeys: CustomerSegmentFilterKeys\n  ) {\n    customerSegments(\n      after: $after\n      before: $before\n      first: $first\n      last: $last\n      query: $query\n      filterKeys: $filterKeys\n    ) {\n      pageInfo {\n        endCursor\n        hasNextPage\n        hasPreviousPage\n        startCursor\n      }\n      edges {\n        node {\n          _id\n          title\n        }\n      }\n    }\n  }\n": typeof types.CustomerSegmentsDocument;
     "\n  query Variants($after: ID, $before: ID, $first: Int, $last: Int, $query: String,$filterKeys: VariantFilterKeys) {\n    variants(after: $after, before: $before, first: $first, last: $last, query: $query,filterKeys: $filterKeys) {\n      pageInfo {\n        endCursor\n        hasNextPage\n        hasPreviousPage\n        startCursor\n      }\n      edges {\n        node {\n          _id\n          option1\n          option2\n          option3\n          image {\n            _id\n            url\n          }\n          product {\n            _id\n            title\n          }\n        }\n      }\n    }\n  }\n": typeof types.VariantsDocument;
 };
 declare const documents: Documents;
@@ -117,7 +117,7 @@ export declare function graphql(source: "query _regions($filterKeys: _RegionFilt
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export declare function graphql(source: "query CustomerSegments($after: ID, $before: ID, $first: Int, $last: Int, $query: String, $filterKeys: CustomerSegmentFilterKeys) {\n  customerSegments(after: $after, before: $before, first: $first, last: $last, query: $query, filterKeys: $filterKeys) {\n    pageInfo {\n      endCursor\n      hasNextPage\n      hasPreviousPage\n      startCursor\n    }\n    edges {\n      node {\n        _id\n        title\n      }\n    }\n  }\n}"): (typeof documents)["query CustomerSegments($after: ID, $before: ID, $first: Int, $last: Int, $query: String, $filterKeys: CustomerSegmentFilterKeys) {\n  customerSegments(after: $after, before: $before, first: $first, last: $last, query: $query, filterKeys: $filterKeys) {\n    pageInfo {\n      endCursor\n      hasNextPage\n      hasPreviousPage\n      startCursor\n    }\n    edges {\n      node {\n        _id\n        title\n      }\n    }\n  }\n}"];
+export declare function graphql(source: "\n  query CustomerSegments(\n    $after: ID\n    $before: ID\n    $first: Int\n    $last: Int\n    $query: String\n    $filterKeys: CustomerSegmentFilterKeys\n  ) {\n    customerSegments(\n      after: $after\n      before: $before\n      first: $first\n      last: $last\n      query: $query\n      filterKeys: $filterKeys\n    ) {\n      pageInfo {\n        endCursor\n        hasNextPage\n        hasPreviousPage\n        startCursor\n      }\n      edges {\n        node {\n          _id\n          title\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  query CustomerSegments(\n    $after: ID\n    $before: ID\n    $first: Int\n    $last: Int\n    $query: String\n    $filterKeys: CustomerSegmentFilterKeys\n  ) {\n    customerSegments(\n      after: $after\n      before: $before\n      first: $first\n      last: $last\n      query: $query\n      filterKeys: $filterKeys\n    ) {\n      pageInfo {\n        endCursor\n        hasNextPage\n        hasPreviousPage\n        startCursor\n      }\n      edges {\n        node {\n          _id\n          title\n        }\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */

package/dist/shared/graphql/gql.js

@@ -17,7 +17,7 @@ const documents = {
     "query Pages($filterKeys: PageFilterKeys, $after: ID, $before: ID, $first: Int, $last: Int, $query: String) {\n  pages(filterKeys: $filterKeys, after: $after, before: $before, first: $first, last: $last, query: $query) {\n    pageInfo {\n      endCursor\n      hasNextPage\n      hasPreviousPage\n      startCursor\n    }\n    edges {\n      node {\n        _id\n        title\n        image {\n          _id\n          url\n        }\n      }\n    }\n  }\n}": PagesDocument,
     "\n  query Products($after: ID, $before: ID, $first: Int, $last: Int, $query: String,$filterKeys: ProductFilterKeys) {\n    products(after: $after, before: $before, first: $first, last: $last, query: $query,filterKeys: $filterKeys) {\n      pageInfo {\n        endCursor\n        hasNextPage\n        hasPreviousPage\n        startCursor\n      }\n      edges {\n        node {\n          _id\n          title\n          image {\n            _id\n            url\n          }\n        }\n      }\n    }\n  }\n": ProductsDocument,
     "query _regions($filterKeys: _RegionFilterKeys, $query: String, $after: ID, $before: ID, $first: Int, $last: Int) {\n  _regions(filterKeys: $filterKeys, query: $query, after: $after, before: $before, first: $first, last: $last) {\n    pageInfo {\n      endCursor\n      hasNextPage\n      hasPreviousPage\n      startCursor\n    }\n    edges {\n      node {\n        _id\n        name\n      }\n    }\n  }\n}": _RegionsDocument,
-    "query CustomerSegments($after: ID, $before: ID, $first: Int, $last: Int, $query: String, $filterKeys: CustomerSegmentFilterKeys) {\n  customerSegments(after: $after, before: $before, first: $first, last: $last, query: $query, filterKeys: $filterKeys) {\n    pageInfo {\n      endCursor\n      hasNextPage\n      hasPreviousPage\n      startCursor\n    }\n    edges {\n      node {\n        _id\n        title\n      }\n    }\n  }\n}": CustomerSegmentsDocument,
+    "\n  query CustomerSegments(\n    $after: ID\n    $before: ID\n    $first: Int\n    $last: Int\n    $query: String\n    $filterKeys: CustomerSegmentFilterKeys\n  ) {\n    customerSegments(\n      after: $after\n      before: $before\n      first: $first\n      last: $last\n      query: $query\n      filterKeys: $filterKeys\n    ) {\n      pageInfo {\n        endCursor\n        hasNextPage\n        hasPreviousPage\n        startCursor\n      }\n      edges {\n        node {\n          _id\n          title\n        }\n      }\n    }\n  }\n": CustomerSegmentsDocument,
     "\n  query Variants($after: ID, $before: ID, $first: Int, $last: Int, $query: String,$filterKeys: VariantFilterKeys) {\n    variants(after: $after, before: $before, first: $first, last: $last, query: $query,filterKeys: $filterKeys) {\n      pageInfo {\n        endCursor\n        hasNextPage\n        hasPreviousPage\n        startCursor\n      }\n      edges {\n        node {\n          _id\n          option1\n          option2\n          option3\n          image {\n            _id\n            url\n          }\n          product {\n            _id\n            title\n          }\n        }\n      }\n    }\n  }\n": VariantsDocument
 };
 function graphql(source) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soppiya/app-bridge",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "type": "module",
   "exports": {
     ".": {