0


I am building a website where the user could search for recipes, based on ingredients.
I created a MySQL database, composed of two tables (ingredients and recipes), which can be access by a node.js backend server hosted on Heroku.

The ingredients are used to give the user suggestions when he is typing ingredients into the search bar. These suggestions are reloaded everytime the user changes the input.

However, I've had a problem that when I open the website for the first time after turning off my computer for example, the suggestions won't appear for maybe one minute or 30 seconds, and then will pop up, revealing at once all the suggestions for the previously made inputs.

What I mean by that is that the frontend sends every request on inputs, but the server only responds back with all the requests at once after maybe 1 minute. After that, it looks like everything is working fine and this bug doesn't appear anymore. I suspect the API to simply take time to load on the first time, but I have no idea on how to fix it.

Here is an example of the suggestions



and a snippet of the code :

$("#searchBar").on("input", () => {
    var research = $('#searchBar').val();
    if(research == null || research == ""){
        $("#searchSuggestions").empty();
        $("#searchSuggestions").css("display", `none`)
    }else{
        fetch(`https://babasrecipes.herokuapp.com/ingredients/${research}`, {method : "POST"})
        .then(res => res.json())
        .then(data => {
            $("#searchSuggestions").empty();
            var dataLength = data.length;
            var heightSug = dataLength*5;
            if(dataLength == 0){
                $("#searchSuggestions").empty();
                $("#searchSuggestions").css("display", `none`);
            }else{
                $("#searchSuggestions").css("height", `${heightSug}vh`);
                $("#searchSuggestions").css("display", `flex`)
                for(var i = 0; i < dataLength;i++){
                    var noSpaceName = data[i].name.replace(/ /g, "-");
                    $("#searchSuggestions").append(`<p class="suggestion" onclick="suggestionClick(this)" id="${noSpaceName}">${data[i].name}</p>`);
                }
            }
        })
    }
})
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,400;0,500;0,600;0,700;0,900;1,100;1,400&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

.search{
    position: relative;
    border: 1px solid black;
    border-radius: 3px;
    left: 0.7vw;
    top: 5vh;
    height: 5vh;
}

#searchBar{
    width: 24vw;
    padding: 10px;
}

#searchSuggestions{
    position: relative;
    background-color: white;
    left: 0.7vw;
    top: 5vh;
    height: 36vh;
    width: 24vw;
    z-index: 100;
    border: 1px solid black;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top: none;
    display: none;
    flex-direction: column;
    padding-top: 5px;
}

.suggestion{
    width: 23.8vw; 
    height: 15vh; 
    vertical-align: middle;
    background-color: white;
    text-overflow: hidden;
    padding-left: 10px;
}

.suggestion:hover{
    background-color:rgb(235, 235, 235);
    cursor: pointer;
}
<!DOCTYPE html>
<html>
  <header>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </header>
  <body>
    <div id="searchPart">
      <label for="searchBar" style="display: none;">Add ingredients to your search</label>
      <input id="searchBar" type="text" class="search" placeholder="Add ingredients...">
      <div id="searchSuggestions"></div>
    </div>
  </body>
</html>

My website is hosted on Firebase, and the problem doesn't come from my laptop as I have had the same problem when trying the website from another computer, connected to a different wifi in a different place.

There are around 1200 ingredients in the database but everything was working fine locally.

Could someone help me understand why the suggestions take time to appear when I load the website for the first time and how to prevent it ?

EDIT : To be clear about how everything work, I have my frontend files hosted on Firebase which are what is loaded by the user, and from there, the frontend fetch api from a node.js script hosted with heroku

Baptiste
  • 68
  • 1
  • 10
  • Never used Firebase, but it sounds like your app's backend is being deactivated after not being used for a while, and takes time to get reactivated when you use it again. – T.J. Crowder Mar 31 '21 at 14:06
  • Is there anyway I could re-activate my app's backend when the website is loaded ? – Baptiste Mar 31 '21 at 14:07

1 Answers1

0

After doing some more researches, I found that when your heroku app stays unused for some time, it will get unloaded and will take some time reactivating on the next use.

Source : Why are my basic Heroku apps taking two seconds to load?

Basicaly, the only thing I might be able to do is to try to load the app directly when loading my website, in order to reactivates it and then it should work fine. There doesn't seem to be another solution there, which is normal considering Heroku's hosting is free and needs to save server memory.

Baptiste
  • 68
  • 1
  • 10