Improve UX for changing chats in creators page

package.json

@@ -69,7 +69,7 @@
     "@polkawallet/bridge": "0.1.3",
     "@reduxjs/toolkit": "^1.6.2",
     "@subsocial/api": "0.8.13",
-    "@subsocial/grill-widget": "0.0.11",
+    "@subsocial/grill-widget": "^0.0.12",
     "@subsocial/resource-discussions": "0.0.4",
     "@subsocial/utils": "0.8.13",
     "@zeit/next-css": "^1.0.1",

src/components/chat/ChatIframe.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx'
-import { ComponentProps, useEffect } from 'react'
-import grill, { GrillConfig } from '@subsocial/grill-widget'
+import { ComponentProps, useEffect, useState } from 'react'
+import grill, { GrillConfig, GrillEventListener } from '@subsocial/grill-widget'
 import { useSendEvent } from '../providers/AnalyticContext'
 import useWrapInRef from '../../hooks/useWrapInRef'
 import { Resource } from '@subsocial/resource-discussions'
@@ -73,6 +73,7 @@ export default function ChatIframe ({
   const sendEvent = useSendEvent()
   const sendEventRef = useWrapInRef(sendEvent)
   const { spaceId, metadata } = useChatContext()
+  const [ isLoading, setIsLoading ] = useState(false)
 
   useEffect(() => {
     const config = generateGrillConfig({ spaceId, metadata })
@@ -92,15 +93,38 @@ export default function ChatIframe ({
           onUnreadCountChange(count)
         }
       : undefined
-    if (listener) {
-      grill.addUnreadCountListener(listener)
+    const eventListener: GrillEventListener = (eventName, value) => {
+      if (eventName === 'unread' && parseInt(value)) listener?.(parseInt(value))
+      if (eventName === 'isUpdatingConfig') {
+        if (value === 'true') {
+          setIsLoading(true)
+        } else if (value === 'false') {
+          setIsLoading(false)
+        }
+      }
+    }
+    grill.addUnreadCountListener(eventListener)
+
+    if (grill.instances['grill']) {
+      grill.setConfig(config)
+    } else {
+      grill.init(config)
     }
-    grill.init(config)
 
     return () => {
-      if (listener) grill.removeUnreadCountListener(listener)
+      if (listener) grill.removeUnreadCountListener(eventListener)
     }
   }, [ spaceId ])
 
-  return <div {...props} id='grill' className={clsx(props.className)} />
+  return (
+    <div
+      {...props}
+      id='grill'
+      className={clsx(
+        props.className, 
+        'transition-opacity',
+        !isLoading ? 'opacity-100' : 'opacity-0 pointer-events-none'
+      )}
+    />
+  )
 }

src/components/creatorsStaking/Banner/index.tsx

@@ -43,7 +43,7 @@ const StatsCards = () => {
         <Apr/>
       ),
       infoTitle:
-        'An estimate of how much your token balance will increase after a year of staking',
+        'An estimate of how much your token balance will increase after a year of staking, regardless of which creator you stake to',
     },
     {
       title: 'Next Rewards',

src/rtk/features/creatorStaking/generalEraInfo/generalEraInfoSaga.ts

@@ -1,4 +1,4 @@
-import { call, put, takeLatest, select } from '@redux-saga/core/effects'
+import { call, put, takeLeading, select } from '@redux-saga/core/effects'
 import { log } from '../../../app/util'
 import { 
   GeneralEraInfo, 
@@ -16,6 +16,7 @@ export function* fetchGeneeralEraInfoWorker (action: PayloadAction<GeneralEraInf
 
   try {
     const selectedData: GeneralErainfoEntity = yield select(selectGeneralEraInfo)
+    console.log('selectedData', selectedData)
 
     if(!selectedData?.info || reload) {
       const response: GeneralEraInfo | undefined = yield call(getGeneralEraInfo)
@@ -32,5 +33,5 @@ export function* fetchGeneeralEraInfoWorker (action: PayloadAction<GeneralEraInf
 }
 
 export function* watchGeneralEraInfo () {
-  yield takeLatest(generalEraInfoActions.fetchGeneralEraInfo.type, fetchGeneeralEraInfoWorker)
+  yield takeLeading(generalEraInfoActions.fetchGeneralEraInfo.type, fetchGeneeralEraInfoWorker)
 }

yarn.lock

@@ -5290,10 +5290,10 @@
     "@polkadot/api" latest
     lodash.camelcase "^4.3.0"
 
-"@subsocial/grill-widget@0.0.11":
-  version "0.0.11"
-  resolved "https://registry.yarnpkg.com/@subsocial/grill-widget/-/grill-widget-0.0.11.tgz#c77267b1c1344b5535fadfc5c1d7b062862f331f"
-  integrity sha512-2XOUbd467AeRtPkv2W3oYYfHGJCXAWEDMx6NpXdYs4AMOm1ZtHPjknrQ88/dcZCxDl26XcCRCSysu9n/6qPu2w==
+"@subsocial/grill-widget@^0.0.12":
+  version "0.0.12"
+  resolved "https://registry.yarnpkg.com/@subsocial/grill-widget/-/grill-widget-0.0.12.tgz#57384850a3adb5342a5505a3f0d67c258d7e3b0e"
+  integrity sha512-Xed+wN/NEZ+mQlKA1olVVcBviVIQOTyqaCYcl9pGsg8yDdIBsKVjqJUKty1vvBL7gY0A+1osdwBgX2xUsbHOBA==
 
 "@subsocial/resource-discussions@0.0.4":
   version "0.0.4"