fix loading confusing message and front page product area link

components/productArea/productAreaLinks.tsx

@@ -6,11 +6,11 @@ const ProductAreaHasItems = (p: any)=> !!p?.teams.filter((it: any)=> it.dataprod
 
 const ProductAreaLinks = () => {
   var defaultProductAreaID = '6b149078-927b-4570-a1ce-97bbb9499fb6'
-  const {productAreas} = useGetProductAreas()
+  const {productAreas, error} = useGetProductAreas()
   const productAreaWithItems = productAreas?.filter(it=> ProductAreaHasItems(it));
   if(productAreaWithItems.length>0){
     defaultProductAreaID = productAreaWithItems.find(it=> it.id== defaultProductAreaID)?.id || productAreaWithItems[0].id
-  }else{
+  }else if(error){
     return null
   }
 

pages/dataproduct/new.tsx

@@ -8,10 +8,15 @@ import {
 import { GetServerSideProps } from 'next'
 import { addApolloState, initializeApollo } from '../../lib/apollo'
 import InnerContainer from '../../components/lib/innerContainer'
+import LoaderSpinner from '../../components/lib/spinner'
 
 const NewDataproduct = () => {
   const userInfo = useUserInfoDetailsQuery()
 
+  if(!userInfo || userInfo.loading){
+    return <LoaderSpinner />
+  }
+
   if (!userInfo.data?.userInfo)
     return (
       <div>

pages/insightProduct/new.tsx

@@ -8,10 +8,15 @@ import {
 import { GetServerSideProps } from 'next'
 import { addApolloState, initializeApollo } from '../../lib/apollo'
 import InnerContainer from '../../components/lib/innerContainer'
+import LoaderSpinner from '../../components/lib/spinner'
 
 const NewInsightProduct = () => {
   const userInfo = useUserInfoDetailsQuery()
 
+  if(!userInfo || userInfo.loading){
+    return <LoaderSpinner />
+  }
+
   if (!userInfo.data?.userInfo)
     return (
       <div>

pages/story/new.tsx

@@ -8,10 +8,15 @@ import {
 import { GetServerSideProps } from 'next'
 import { addApolloState, initializeApollo } from '../../lib/apollo'
 import InnerContainer from '../../components/lib/innerContainer'
+import LoaderSpinner from '../../components/lib/spinner'
 
 const NewStory = () => {
   const userInfo = useUserInfoDetailsQuery()
 
+  if(!userInfo || userInfo.loading){
+    return <LoaderSpinner />
+  }
+
   if (!userInfo.data?.userInfo)
     return (
       <div>

pages/user/[[...page]].tsx

@@ -18,6 +18,11 @@ export const UserPages = () => {
 
     if (error) return <ErrorMessage error={error} />
     if (loading || !data) return <LoaderSpinner />
+
+    if(loading){
+        return <LoaderSpinner />
+      }
+
     if (!data.userInfo)
         return (
             <div>