fixed issue #646

src/components/App/SideBar/Trending/index.tsx

@@ -4,6 +4,7 @@ import { useFormContext } from 'react-hook-form'
 import { ClipLoader } from 'react-spinners'
 import styled from 'styled-components'
 import PlusIcon from '~/components/Icons/PlusIcon'
+import TrendingIcon from '~/components/Icons/TrendingIcon'
 import { Flex } from '~/components/common/Flex'
 import { getTrends } from '~/network/fetchGraphData'
 import { useDataStore } from '~/stores/useDataStore'
@@ -76,8 +77,12 @@ export const Trending = ({ onSubmit }: Props) => {
   return (
     <Wrapper>
       <div>
-        {trendingTopics.length === 0 && !loading ? (
+        {trendingTopics.length !== 0 && !loading ? (
           <div className="Trendingwrapper">
+            <div className="trending-header">
+              <div className="heading">Trending Topics</div>
+              <TrendingIcon className="icon" />
+            </div>
             <Text>No new trending topics in the last 24 hours</Text>
             <ButtonStyled
               color="secondary"
@@ -129,27 +134,32 @@ export const Trending = ({ onSubmit }: Props) => {
 }
 
 const Wrapper = styled(Flex)`
-  .heading {
-    color: ${colors.GRAY6};
-    padding: 0 24px 9px 24px;
-    font-family: Barlow;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 20px;
-    letter-spacing: 1.12px;
-    text-transform: uppercase;
-    display: flex;
-    align-items: flex-end;
-
-    &__icon {
+  .trending-header {
+    display: inline-flex;
+    margin-bottom: 9px;
+
+    .heading {
+      color: ${colors.GRAY6};
+      padding-right: 24px;
+      font-family: Barlow;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 20px;
+      letter-spacing: 1.12px;
+      text-transform: uppercase;
+    }
+
+    .icon {
       margin-left: 16px;
       font-size: 24px;
     }
   }
+
   .Trendingwrapper {
     margin-left: 23px;
     margin-top: 20px;
+    color: ${colors.GRAY6};
   }
 
   .list {

src/components/Icons/TrendingIcon.tsx

@@ -0,0 +1,18 @@
+/* eslint-disable */
+import React from 'react'
+
+const TrendingIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <mask id="mask0_1795_36275" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+      <rect width="24" height="24" fill="#D9D9D9" />
+    </mask>
+    <g mask="url(#mask0_1795_36275)">
+      <path
+        d="M3 17.75L2.91345 16.4327L4.74998 14.6058V17.75H3ZM7.25003 17.75V12.1058L8.74998 10.6058V17.75H7.25003ZM11.25 17.75V10.6058L12.75 12.1308V17.75H11.25ZM15.25 17.75V12.1308L16.75 10.6308V17.75H15.25ZM19.25 17.75V8.10579L20.75 6.60583V17.75H19.25ZM3.25003 12.2192V10.1058L10 3.35581L14 7.35581L20.75 0.605835V2.71924L14 9.46921L10 5.46921L3.25003 12.2192Z"
+        fill="#909BAA"
+      />
+    </g>
+  </svg>
+)
+
+export default TrendingIcon

src/components/SourcesTableModal/SourcesView/Topics/index.tsx

@@ -17,7 +17,7 @@
 import { Table } from './Table'
 
 export const TopicSources = () => {
-  const [loading, setLoading] = useState(true)
+  const [loading, setLoading] = useState(false)
 
   const [data, ids, total, setTopics, filters, setFilters, terminate] = useTopicsStore((s) => [
     s.data,
@@ -54,7 +54,7 @@
         setLoading(true)
         await setTopics()
       } catch {
         console.log('err')
       } finally {
         setLoading(false)
       }
@@ -63,8 +63,15 @@
     init()
   }, [setTopics, filters])
 
-  const handleLoadMore = () => {
-    setFilters({ page: filters.page + 1 })
+  const handleLoadMore = async () => {
+    try {
+      setLoading(true)
+      setFilters({ page: filters.page + 1 })
+    } catch (error) {
+      console.error('Error loading more data:', error)
+    } finally {
+      setLoading(false)
+    }
   }
 
   useEffect(

src/stores/useTopicsStore/index.ts

@@ -38,8 +38,9 @@ export const useTopicsStore = create<TopicsStore>((set, get) => ({
 
     const responseData: FetchTopicResponse = await getTopicsData(payload)
 
-    const newData: Record<string, Topic> = filters.page > 0 ? data || {} : {}
-    const newIds: string[] = filters.page > 0 ? ids : []
+    // Instead of replacing the data, append new data to existing data
+    const newData: Record<string, Topic> = { ...(data || {}) }
+    const newIds: string[] = [...ids]
 
     responseData.data.forEach((topic) => {
       newData[topic.ref_id] = topic