Bdtjtk

When a user signs up, the home page gets loaded (student-home.handlebars);

If a navigate to the messages page i have set a timeout on the update compile because i have to wait for firebase to load in the messages.

However, this SetTimeout causes a bug: when i sign up, the homepage renders and in one second (after the setTimeout of 1000ms) i get automatically navigated to student-messages.handlebars.

This only happens with this timeOut being set, but should actually not be possible because the student-home.handlebars doesn't read any code from the student-messsages.handlebars.

Is there another way to load the message view with a small delay so the messages are being showed? Or an explanation why this setTimeout causes this problem?

  import {

      getInstance

    } from '../firebase/firebase';

    const firebase = getInstance();



const studentMessagesViewTemplate = require('../templates/student-messages.handlebars');

        export default () => {







    const database = firebase.database();

    const ref = 

    database.ref('messages/').orderByChild('receiver').equalTo(currentUserKey);



        ref.on("value", function (snap) {

          snap.forEach(function (childSnapshot) {

            let data = childSnapshot.val();

            if (data.receiver === currentUserKey) {

              Message = {

                content: data.content,

                sender: data.senderName,

                senderKey: data.senderKey,

                receiver: currentUserKey,

                date: data.date

              }

            }

            messageList.push(Message);

            // console.log(messageList);

          });

        });



        setTimeout(() => {

              // Return the compiled template to the router

              update(compile(studentMessagesViewTemplate)({

                messageList

              }));

              let messageDetail = document.querySelectorAll('.messages-list');

              for (let i = 0; i < messageDetail.length; i++) {

                messageDetail[i].id = "messageDetail" + i;

                messageDetail[i].addEventListener('click', showDetail);

              };

              // firebase logout at buttonclick

              const btnLogout = document.querySelector('.btnLogout');

              btnLogout.addEventListener('click', e => {

                firebase.auth().signOut().then(function () {

                  window.location.replace('#/');

                });

              });

            }, 1000);

    }

A setTimeout() is only the proper solution when you want something to run after a certain time. Here you want to run the code after the data is loaded, which is not a certain time (it is in fact pretty uncertain most of the time).

To run your other code after the data has loaded, move it into (or call it from) the callback that Firebase invokes after the data has loaded. Something like this:

    ref.on("value", function (snap) {

      snap.forEach(function (childSnapshot) {

        let data = childSnapshot.val();

        if (data.receiver === currentUserKey) {

          Message = {

            content: data.content,

            sender: data.senderName,

            senderKey: data.senderKey,

            receiver: currentUserKey,

            date: data.date

          }

        }

        messageList.push(Message);

        // console.log(messageList);

      });

      // Return the compiled template to the router

      update(compile(studentMessagesViewTemplate)({

        messageList

      }));

      let messageDetail = document.querySelectorAll('.messages-list');

      for (let i = 0; i < messageDetail.length; i++) {

        messageDetail[i].id = "messageDetail" + i;

        messageDetail[i].addEventListener('click', showDetail);

      };

      // firebase logout at buttonclick

      const btnLogout = document.querySelector('.btnLogout');

      btnLogout.addEventListener('click', e => {

        firebase.auth().signOut().then(function () {

          window.location.replace('#/');

        });

      });

    });