Page MenuHomePhabricator

Research/Add a loading indicator to a Vue component.
Closed, ResolvedPublicSpike

Description

Background information

As a system, I want to display a loading indicator using Codex so that users can see a visual indication a component is loading rather than empty space.

Questions

  • Can I attach a loading indicator to a component? Yes
  • What steps are needed? --> Steps

Event Timeline

eigyan renamed this task from Research/Add a loading indicator to a component. to Research/Add a loading indicator to a Vue component..May 2 2023, 5:23 PM
ERayfield changed the task status from Open to In Progress.May 9 2023, 11:28 AM
ERayfield claimed this task.
ERayfield updated the task description. (Show Details)

You can attach a loading indicator to a component in Vue.js by using the v-if directive and a boolean variable that is set to true when the component is loading and false when it is not.
Example for template:

<template>
  <div>
    <div v-if="isLoading">
      Loading... OR animated eye candy
    </div>
  <div v-else>
    <!-- The component the loading is for placed here -->
  </div>
</div>
</template>

The script part

//then the script

<script>

export default {
  data() {
    return {
      isLoading: true,
  };
},
mounted() {
   // guestimate loading time
   setTimeout(() => {
     this.isLoading = false;
   }, 2000);
  },
};
</script>

This code will display the “Loading…” text or whatever eye candy one wishes to use when the component is loading and the actual component when it’s done.

The setTimeout function is used to simulate the actual loading time of your component. The first argument is an arrow function that sets the isLoading variable to false after a delay of 2000 milliseconds (2 seconds).

NOTE: as an FYI (since I was not really clear in the text what an arrow function was, although in the code it made sense, just didn't know what it was called) here is the explanation from StackOverflow:

An arrow function is a type of function expression that was introduced in ECMAScript 6 (ES6). It is a shorthand way of writing a function expression that uses the => syntax. Arrow functions are often used in Vue.js to define methods and computed properties.

In Vue.js, arrow functions are bound to the parent context, which means that this will not be the Vue instance as you’d expect. This can often result in errors such as “Uncaught TypeError: Cannot read property of undefined”. To avoid this issue, you can use regular function expressions instead of arrow functions.

additional notes from google bard:
To pass a PHP value to a .vue file, you can use the following steps:
In your PHP file, create a variable and assign it the value you want to pass to the .vue file.
In your .vue file, use the {{}} syntax to access the variable.
To prevent the value from being passed to the client, add the v-cloak attribute to the element that contains the variable.
For example, the following PHP code would create a variable called message and assign it the value "Hello, world!".
PHP
$message = "Hello, world!";

The following .vue code would use the {{}} syntax to access the message variable and display it on the page.
HTML
<div v-cloak>

{{ message }}

</div>

The v-cloak attribute would prevent the value of the message variable from being passed to the client. As a result, the value of the variable would only be displayed on the page when the server-side rendering is complete.
Here is a complete example of how to pass a PHP value to a .vue
PHP
<?php

$message = "Hello, world!";

?>

HTML
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Passing a PHP value to a .vue file server-side only</title>

</head>
<body>

<script src="https://unpkg.com/vue"></script>
<script>
  new Vue({
    el: "#app",
    data: {
      message: ""
    }
  });
</script>
<div id="app">
  <div v-cloak>
    {{ message }}
  </div>
</div>

</body>
</html>

When this code is executed, the value of the message variable will only be displayed on the page after the server-side rendering is complete.

ANOTHER WAY**
There are two ways to pass a PHP value to a Vue.js component :

  1. Using the session variable

The session variable is a global variable that stores data that is associated with a specific user session. To pass a PHP value to a Vue.js component server side only using the session variable, you can do the following:
In your PHP code, set the value of the session variable to the value that you want to pass to the Vue.js component.
In your Vue.js component, use the sessionStorage object to get the value of the session variable.
For example, the following PHP code will set the value of the session variable to the string "Hello, World!".
PHP
session_start();
$_SESSION['greeting'] = 'Hello, World!';

The following Vue.js component will get the value of the session variable and display it in the browser.
HTML
<script src="https://unpkg.com/vue"></script>

<script>
new Vue({

el: '#app',
data() {
  return {
    greeting: ''
  }
},
mounted() {
  this.greeting = sessionStorage.getItem('greeting');
}

});
</script>

<div id="app">

<h1>{{ greeting }}</h1>

</div>

  1. Using the $_GET or $_POST variables

The $_GET and $_POST variables are global variables that store data that is passed to the PHP script through the query string or the POST body. To pass a PHP value to a Vue.js component server side only using the $_GET or $_POST variables, you can do the following:
In your PHP code, use the $_GET or $_POST variable to get the value that you want to pass to the Vue.js component.
In your Vue.js component, use the this.$route.query or this.$route.params object to get the value of the $_GET or $_POST variable.
For example, the following PHP code will set the value of the greeting query string parameter to the string "Hello, World!".
PHP
$greeting = $_GET['greeting'];

The following Vue.js component will get the value of the greeting query string parameter and display it in the browser.
HTML
<script src="https://unpkg.com/vue"></script>

<script>
new Vue({

el: '#app',
data() {
  return {
    greeting: ''
  }
},
mounted() {
  this.greeting = this.$route.query.greeting;
}

});
</script>

<div id="app">

<h1>{{ greeting }}</h1>

</div>