Sort my products, stores and insight products by team and name

components/search/resultList.tsx

@@ -83,6 +83,48 @@ const ResultList = ({
       teamkatalogenTeam: tk?.name
     }
   }
+  const [dpLoading, setDpLoading] = useState(true);
+
+  useEffect(() => {
+    if (dataproducts) {
+      setDpLoading(false);
+    }
+  }, [dataproducts]);
+
+  const sortArrayByTeamAndName = (array: any[], owner: string, nameKey: string) => {
+    if (array) {
+      array.sort((a, b) => {
+        // If owner is defined for both a and b
+        if (a[owner] && b[owner]) {
+          let comparison = a[owner].toLowerCase().localeCompare(b[owner].toLowerCase());
+          // If owner is not the same, sort by owner
+          if (comparison !== 0) return comparison;
+        } else if (a[owner]) {
+          // If owner is defined for a but not for b, a comes first
+          return -1;
+        } else if (b[owner]) {
+          // If owner is defined for b but not for a, b comes first
+          return 1;
+        } else {
+          // If both a and b are undefined, they are equal in terms of sorting
+          return 0;
+        }
+        // If owner is the same or both are undefined, sort by name
+        if (a[nameKey] && b[nameKey]) {
+          return a[nameKey].toLowerCase().localeCompare(b[nameKey].toLowerCase());
+        } else if (a[nameKey]) {
+          // If name is defined for a but not for b, a comes first
+          return -1;
+        } else if (b[nameKey]) {
+          // If name is defined for b but not for a, b comes first
+          return 1;
+        } else {
+          // If both a and b are undefined, they are equal in terms of sorting
+          return 0;
+        }
+      });
+    }
+  }
 
   if (search && !!searchParam) {
     var { data, loading, error } = search
@@ -96,6 +138,7 @@ const ResultList = ({
       (d) => !isDataProduct(d.result)
     )
 
+
     return (
       <Results>
         <Tabs
@@ -161,7 +204,21 @@ const ResultList = ({
       </Results>
     )
   }
+
+  if (dpLoading) {
+    return <LoaderSpinner />;
+  }
+
+// Rest of your component code
+
   if (dataproducts) {
+    dataproducts.sort((a,b) => {
+          if (a.owner.teamkatalogenURL && b.owner.teamkatalogenURL) {
+            return (getTeamKatalogenInfo(a.owner.teamkatalogenURL).teamkatalogenTeam + a.name).toLowerCase().localeCompare((getTeamKatalogenInfo(b.owner.teamkatalogenURL).teamkatalogenTeam + b.name).toLowerCase())
+          }
+          return a.name.toLowerCase().localeCompare(b.name.toLowerCase())
+        }
+    )
     return (
       <Results>
         {dataproducts.map((d, idx) => (
@@ -179,6 +236,7 @@ const ResultList = ({
   }
 
   if (stories) {
+    sortArrayByTeamAndName(stories, 'group', 'name')
     return (
       <div>
         <Results>
@@ -206,6 +264,7 @@ const ResultList = ({
   }
 
   if (insightProducts) {
+    sortArrayByTeamAndName(insightProducts, 'group', 'name')
     return (
       <div>
         <Results>