Merge pull request #2743 from omnivore-app/fix/web-subscription-and-label-loading

Use loading instead of validating to avoid flicker

packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx

@@ -32,9 +32,9 @@ type LibraryFilterMenuProps = {
 }
 
 export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element {
-  const { labels, isValidating: labelsLoading } = useGetLabelsQuery()
+  const { labels, isLoading: labelsLoading } = useGetLabelsQuery()
   const { savedSearches, isLoading: searchesLoading } = useGetSavedSearchQuery()
-  const { subscriptions, isValidating: subscriptionsLoading } =
+  const { subscriptions, isLoading: subscriptionsLoading } =
     useGetSubscriptionsQuery()
 
   return (

packages/web/lib/networking/queries/useGetLabelsQuery.tsx

@@ -4,6 +4,7 @@ import { Label, labelFragment } from '../fragments/labelFragment'
 import { publicGqlFetcher } from '../networkHelpers'
 
 type LabelsQueryResponse = {
+  isLoading: boolean
   isValidating: boolean
   labels: Label[]
   revalidate: () => void
@@ -34,13 +35,14 @@ export function useGetLabelsQuery(): LabelsQueryResponse {
     ${labelFragment}
   `
 
-  const { data, mutate, isValidating } = useSWR(query, publicGqlFetcher)
+  const { data, error, mutate, isValidating } = useSWR(query, publicGqlFetcher)
 
   try {
     if (data) {
       const result = data as LabelsResponseData
       const labels = result.labels?.labels as Label[]
       return {
+        isLoading: !error && !data,
         isValidating,
         labels,
         revalidate: () => {
@@ -52,6 +54,7 @@ export function useGetLabelsQuery(): LabelsQueryResponse {
     console.log('error', error)
   }
   return {
+    isLoading: !error && !data,
     isValidating: false,
     labels: [],
     // eslint-disable-next-line @typescript-eslint/no-empty-function

packages/web/lib/networking/queries/useGetSubscriptionsQuery.tsx

@@ -25,6 +25,7 @@ export type Subscription = {
 }
 
 type SubscriptionsQueryResponse = {
+  isLoading: boolean
   isValidating: boolean
   subscriptions: Subscription[]
   revalidate: () => void
@@ -74,7 +75,7 @@ export function useGetSubscriptionsQuery(
       by: sortBy,
     },
   }
-  const { data, mutate, isValidating } = useSWR(
+  const { data, error, mutate, isValidating } = useSWR(
     [query, variables],
     makeGqlFetcher(variables)
   )
@@ -84,6 +85,7 @@ export function useGetSubscriptionsQuery(
       const result = data as SubscriptionsResponseData
       const subscriptions = result.subscriptions.subscriptions as Subscription[]
       return {
+        isLoading: !error && !data,
         isValidating,
         subscriptions,
         revalidate: () => {
@@ -95,6 +97,7 @@ export function useGetSubscriptionsQuery(
     console.log('error', error)
   }
   return {
+    isLoading: !error && !data,
     isValidating: true,
     subscriptions: [],
     // eslint-disable-next-line @typescript-eslint/no-empty-function