1 files changed, 15 insertions, 1 deletions

diff --git a/src/components/settings/recipes/RecipesDashboard.js b/src/components/settings/recipes/RecipesDashboard.js
index 4f19a6116..96207445c 100644
--- a/src/components/settings/recipes/RecipesDashboard.js
+++ b/src/components/settings/recipes/RecipesDashboard.js
@@ -28,6 +28,10 @@ const messages = defineMessages({
     id: 'settings.searchService',
     defaultMessage: 'Search service',
   },
+  mostPopularRecipes: {
+    id: 'settings.recipes.mostPopular',
+    defaultMessage: '!!!Most popular',
+  },
   allRecipes: {
     id: 'settings.recipes.all',
     defaultMessage: 'All services',
@@ -110,6 +114,7 @@ class RecipesDashboard extends Component {
     recipes: MobxPropTypes.arrayOrObservableArray.isRequired,
     customWebsiteRecipe: PropTypes.instanceOf(RecipePreview).isRequired,
     isLoading: PropTypes.bool.isRequired,
+    hasLoadedRecipes: PropTypes.bool.isRequired,
     showAddServiceInterface: PropTypes.func.isRequired,
     searchRecipes: PropTypes.func.isRequired,
     resetSearch: PropTypes.func.isRequired,
@@ -132,6 +137,7 @@ class RecipesDashboard extends Component {
       recipes,
       customWebsiteRecipe,
       isLoading,
+      hasLoadedRecipes,
       showAddServiceInterface,
       searchRecipes,
       resetSearch,
@@ -179,6 +185,14 @@ class RecipesDashboard extends Component {
               activeClassName={`${!searchNeedle ? 'badge--primary' : ''}`}
               onClick={() => resetSearch()}
             >
+              {intl.formatMessage(messages.mostPopularRecipes)}
+            </Link>
+            <Link
+              to="/settings/recipes/all"
+              className="badge"
+              activeClassName={`${!searchNeedle ? 'badge--primary' : ''}`}
+              onClick={() => resetSearch()}
+            >
               {intl.formatMessage(messages.allRecipes)}
             </Link>
             <Link
@@ -243,7 +257,7 @@ class RecipesDashboard extends Component {
                   />
                 ))}
               </div>
-              {recipes.length === 0 && recipeFilter !== 'dev' && (
+              {hasLoadedRecipes && recipes.length === 0 && recipeFilter !== 'dev' && (
                 <div className="align-middle settings__empty-state">
                   {customWebsiteRecipe && customWebsiteRecipe.id && (
                     <RecipeItem