fixes: Blank channel page edge case, prevents duplicate history entries on navigation (#3410)

Ensures navigation actions triggered by buttons and tab changes
do not result in duplicate entries in browser history. This prevents
unnecessary back/forward navigation clutter.

Loading indicators are adjusted to prevent flickering when switching
between tabs or when sections are empty.

Fixes an issue where empty playlist sections would not display the
"No Content Found" message.

Author: tzarebczan

ui/component/button/view.jsx

@@ -247,6 +247,11 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
       disabled={disable}
       onClick={(e) => {
         e.stopPropagation();
+        // Prevent duplicate history entries when navigating to the current page
+        const currentPath = window.location.pathname + window.location.search;
+        if (path === currentPath || path === window.location.pathname) {
+          e.preventDefault();
+        }
         if (onClick) {
           onClick();
         }

ui/page/claim/internal/claimPageComponent/internal/channelPage/tabs/homeTab/internal/homeTabSection/view.jsx

@@ -229,13 +229,31 @@ function HomeTabSection(props: Props) {
     }
   }
 
-  const isLoading =
-    (fetchingClaimSearch || !requiresSearch) &&
-    section.type &&
-    section.type !== 'featured' &&
-    !claimSearchResults &&
-    !collectionClaimIds &&
-    !featuredChannels;
+  // Determine if we should show loading state based on section type:
+  // - Sections requiring search: only show loading if actively fetching
+  // - 'playlist' type: only show loading if claim_id exists and data is pending
+  // - 'channels' type: don't show loading (data either exists or doesn't)
+  // - If no claim_id for playlist, or no data source configured, don't show loading
+  const isLoading = (() => {
+    if (!section.type || section.type === 'featured') return false;
+
+    if (requiresSearch) {
+      // Only show loading during active fetch, not when results are empty/missing
+      return fetchingClaimSearch === true;
+    }
+
+    // For 'playlist' type: need claim_id to load anything
+    if (section.type === 'playlist') {
+      return section.claim_id && !collectionClaimIds && !collectionUrls;
+    }
+
+    // For 'channels' type: don't show loading skeleton
+    if (section.type === 'channels') {
+      return false;
+    }
+
+    return false;
+  })();
 
   return (
     <div className="home-section-content">
@@ -393,6 +411,14 @@ function HomeTabSection(props: Props) {
           </div>
         </div>
       )}
+      {!isLoading &&
+        !editMode &&
+        ((requiresSearch && claimSearchResults && claimSearchResults.length === 0) ||
+          (section.type === 'playlist' && !section.claim_id)) && (
+          <div className="section">
+            <div className="empty empty--centered">{__('No Content Found')}</div>
+          </div>
+        )}
       {section.type &&
         (section.claim_id ||
           collectionUrls ||

ui/page/claim/internal/claimPageComponent/internal/channelPage/view.jsx

@@ -259,44 +259,50 @@ function ChannelPage(props: Props) {
   function onTabChange(newTabIndex, keepFilters) {
     const baseUrl = formatLbryUrlForWeb(uri);
     const url = isEmbedPath ? `/$/embed${baseUrl}` : baseUrl;
-    let search = '';
+    let newSearch = '';
 
     if (!keepFilters) setFilters(undefined);
 
     switch (newTabIndex) {
       case 0:
-        search += `?${CHANNEL_PAGE.QUERIES.VIEW}=${CHANNEL_PAGE.VIEWS.HOME}`;
+        newSearch += `?${CHANNEL_PAGE.QUERIES.VIEW}=${CHANNEL_PAGE.VIEWS.HOME}`;
         break;
       case 1:
-        search += `?${CHANNEL_PAGE.QUERIES.VIEW}=${CHANNEL_PAGE.VIEWS.CONTENT}`;
+        newSearch += `?${CHANNEL_PAGE.QUERIES.VIEW}=${CHANNEL_PAGE.VIEWS.CONTENT}`;
         break;
       case 2:
-        search += `?${CHANNEL_PAGE.QUERIES.VIEW}=${CHANNEL_PAGE.VIEWS.SHORTS}`;
+        newSearch += `?${CHANNEL_PAGE.QUERIES.VIEW}=${CHANNEL_PAGE.VIEWS.SHORTS}`;
         break;
       case 3:
-        search += `?${CHANNEL_PAGE.QUERIES.VIEW}=${CHANNEL_PAGE.VIEWS.PLAYLISTS}`;
+        newSearch += `?${CHANNEL_PAGE.QUERIES.VIEW}=${CHANNEL_PAGE.VIEWS.PLAYLISTS}`;
         break;
       case 4:
-        search += `?${CHANNEL_PAGE.QUERIES.VIEW}=${CHANNEL_PAGE.VIEWS.CHANNELS}`;
+        newSearch += `?${CHANNEL_PAGE.QUERIES.VIEW}=${CHANNEL_PAGE.VIEWS.CHANNELS}`;
         break;
       case 5:
         if (!isOdyseeChannel) {
-          search += `?${CHANNEL_PAGE.QUERIES.VIEW}=${CHANNEL_PAGE.VIEWS.MEMBERSHIP}`;
+          newSearch += `?${CHANNEL_PAGE.QUERIES.VIEW}=${CHANNEL_PAGE.VIEWS.MEMBERSHIP}`;
         }
         break;
       case 6:
-        search += `?${CHANNEL_PAGE.QUERIES.VIEW}=${CHANNEL_PAGE.VIEWS.DISCUSSION}`;
+        newSearch += `?${CHANNEL_PAGE.QUERIES.VIEW}=${CHANNEL_PAGE.VIEWS.DISCUSSION}`;
         break;
       case 7:
         if (!hideAboutTab) {
-          search += `?${CHANNEL_PAGE.QUERIES.VIEW}=${CHANNEL_PAGE.VIEWS.ABOUT}`;
+          newSearch += `?${CHANNEL_PAGE.QUERIES.VIEW}=${CHANNEL_PAGE.VIEWS.ABOUT}`;
         }
         break;
       case 8:
-        search += `?${CHANNEL_PAGE.QUERIES.VIEW}=${CHANNEL_PAGE.VIEWS.SETTINGS}`;
+        newSearch += `?${CHANNEL_PAGE.QUERIES.VIEW}=${CHANNEL_PAGE.VIEWS.SETTINGS}`;
         break;
     }
-    push(`${url}${search}`);
+
+    // Only push if the URL is actually changing to avoid duplicate history entries
+    const newFullUrl = `${url}${newSearch}`;
+    const currentFullUrl = `${pathname}${search}`;
+    if (newFullUrl !== currentFullUrl) {
+      push(newFullUrl);
+    }
   }
 
   React.useEffect(() => {

ui/store.js

@@ -14,7 +14,19 @@ import { persistOptions } from 'redux/setup/persistedState';
 import { sharedStateMiddleware } from 'redux/setup/sharedState';
 import { tabStateSyncMiddleware } from 'redux/setup/tabState';
 
-const history = createBrowserHistory();
+const browserHistory = createBrowserHistory();
+
+// Wrap history.push to prevent duplicate entries
+const originalPush = browserHistory.push.bind(browserHistory);
+browserHistory.push = (path, state) => {
+  const currentPath = browserHistory.location.pathname + browserHistory.location.search;
+  const newPath = typeof path === 'string' ? path : path.pathname + (path.search || '');
+  if (newPath !== currentPath) {
+    originalPush(path, state);
+  }
+};
+
+const history = browserHistory;
 const rootReducer = createRootReducer(history);
 const persistedReducer = persistReducer(persistOptions, rootReducer);
 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;