pp-suspense

The pp-suspense attribute is used to suspend the rendering of an element until the specified condition is met. It is commonly used to delay the display of content until it is fully loaded or processed, providing a better user experience by preventing partial or incomplete rendering.

JS Methods

category method description example
1 Content Manipulation innerHTML Sets or returns the HTML content of an element. element.innerHTML = "<p>Hello World</p>";
2 Content Manipulation outerHTML Sets or returns the HTML including the element itself. element.outerHTML = "<div><p>Hello World</p></div>";
3 Content Manipulation textContent Sets or returns the text content of an element. element.textContent = "Hello World";
4 Content Manipulation innerText Sets or returns the text content of an element. element.innerText = "Hello World";
5 Content Manipulation insertAdjacentHTML Inserts HTML content at a specified position (beforebegin, afterbegin, beforeend, afterend) relative to the element. element.insertAdjacentHTML("beforeend", "<p>Appended text</p>");
6 Content Manipulation insertAdjacentText Inserts text content at a specified position (beforebegin, afterbegin, beforeend, afterend) relative to the element. element.insertAdjacentText("beforeend", "Appended text");
7 Attribute Manipulation setAttribute Adds a new attribute or changes the value of an existing attribute on the element. element.setAttribute("title", "Tooltip text");
8 Attribute Manipulation removeAttribute Removes an attribute from the element. element.removeAttribute("title");
9 Attribute Manipulation getAttribute Returns the value of an attribute on the element. let title = element.getAttribute("title");
10 Attribute Manipulation hasAttribute Returns a Boolean indicating whether the element has the specified attribute. let hasTitle = element.hasAttribute("title");
11 Attribute Manipulation dataset Provides access to custom data attributes (data-*) on the element. element.dataset.custom = "Custom data";
12 Class Manipulation className Sets or returns the class attribute of the element. element.className = "new-class";
13 Class Manipulation classList.add Adds one or more class names to the element. element.classList.add("new-class", "another-class");
14 Class Manipulation classList.remove Removes one or more class names from the element. element.classList.remove("old-class", "another-old-class");
15 Class Manipulation classList.toggle Toggles the presence of a class name on the element. element.classList.toggle("toggle-class");
16 Class Manipulation classList.replace Replaces an existing class name with a new one on the element. element.classList.replace("old-class", "new-class");
17 Class Manipulation classList.contains Checks if the element has the specified class. let hasClass = element.classList.contains("some-class");
18 Style Manipulation style.property Sets a CSS property on the element's style. element.style.color = "red";
19 Style Manipulation getComputedStyle Returns the computed style properties of the element. let style = getComputedStyle(element);
20 Form Element Manipulation value Sets or returns the value of a form element. element.value = "New value";
21 Form Element Manipulation checked Sets or returns the checked state of a checkbox or radio input. element.checked = true;

HTML Attributes

category method description example
1 HTML Attributes disabled Disables the element, preventing user interaction. <button class="p-1 rounded bg-blue-500" disabled>Submit</button>
2 HTML Attributes readonly Makes the element read-only, preventing user input. <input class="border rounded p-1" type="text" readonly value="Read only text">
3 HTML Attributes required Indicates that the element must be filled out before submitting the form. <input class="border rounded p-1" type="text" required placeholder="Required">
4 HTML Attributes src Specifies the URL of the resource (image, video, script, etc.). <img src="image.jpg" alt="Description">
5 HTML Attributes href Specifies the URL of the linked document. <a href="https://example.com">Visit Example</a>
6 HTML Attributes alt Provides alternative text for an image, if the image cannot be displayed. <img src="image.jpg" alt="Alternative text">
7 HTML Attributes title Provides additional information about the element (tooltip). <button class="p-1 rounded bg-blue-500" title="Submit the form">Submit</button>
8 HTML Attributes name Specifies the name of the element, used in form submission. <input class="border rounded p-1" type="text" name="username">
9 HTML Attributes value Specifies the initial value of the form element. <input class="border rounded p-1" type="text" value="Initial value">
10 HTML Attributes placeholder Provides a short hint describing the expected value of the input field. <input class="border rounded p-1" type="text" placeholder="Enter your name">
11 HTML Attributes maxLength Specifies the maximum number of characters allowed in the input field. <input class="border rounded p-1" type="text" maxLength="10">
12 HTML Attributes pattern Specifies a regular expression that the input field's value must match. <input class="border rounded p-1" type="text" pattern="[A-Za-z]{3,}">
13 HTML Attributes min Specifies the minimum value for an input field. <input class="border rounded p-1" type="number" min="1">
14 HTML Attributes max Specifies the maximum value for an input field. <input class="border rounded p-1" type="number" max="100">
15 HTML Attributes step Specifies the legal number intervals for an input field. <input class="border rounded p-1" type="number" step="0.01">
16 HTML Attributes cols Specifies the visible width of a text area in characters. <textarea class="border rounded p-1" cols="30"></textarea>
17 HTML Attributes rows Specifies the visible number of lines in a text area. <textarea class="border rounded p-1" rows="3"></textarea>
18 HTML Attributes selected Specifies the selected option in a dropdown list. <option selected>Option 1</option>
19 HTML Attributes multiple Allows multiple selections in a dropdown list. <select multiple><option>Option 1</option><option>Option 2</option></select>
20 HTML Attributes checked Indicates whether a checkbox or radio button is checked. <input type="checkbox" checked>
21 HTML Attributes style Specifies an inline CSS style for an element. <div style="color: red;">div tag</div>
22 HTML Attributes lang Specifies the language of the element's content. <p lang="en">Hello</p>

Custom JSON Object

category method description example
1 JSON Object onsubmit Disables the suspense state when the form is submitted. <button pp-suspense="{"onsubmit": "disabled"}">Cancel</button>
2 JSON Object empty Disables the suspense state when the element is empty. <input pp-suspense="{"empty": "disabled", "value": "Loading..."}" />
3 JSON Object targets Applies suspense to multiple elements specified by their IDs. <button pp-suspense="{"targets": [{"id": "#element1", "disabled": true}, {"id": "#element2", "textContent": "Loading..."}]}">Cancel</button>

Example Usage

<button pp-suspense="Loading...">Count</button> // Will use textContent to show Loading...
  <button pp-suspense="{'textContent': 'Loading...'}">Count</button>
  <button pp-suspense="{'innerHTML': '<span class="custom-class">Loading...</span>'}">Count</button>
  <button pp-suspense="{'textContent': 'Loading...', 'disabled': 'true'}">Count</button>
  <button pp-suspense="{'classList.add': 'class-1,class-2'}">Count // If there are multiple classes, separate the  with a comma without spaces
  <button pp-suspense="{'classList.remove': 'class-1,class-2'}">Count</button> // If there are multiple classes  separate them with a comma without spaces
  <button pp-suspense="{'classList.replace': 'old-class,new-class'}">Count</button> // Replace old-class wit  new-class in the class list
  <button pp-suspense="{'classList.toggle': 'visible'}">Count</button> // If visible class is present, remove it  otherwise, add it
  <button pp-suspense="{'insertAdjacentHTML': {'html': '<span>Loading...</span>', 'position': 'beforebegin'}}">Coun  lt;/button>
  <button pp-suspense="{'insertAdjacentText': {'text': 'Loading...', 'position': 'afterend'}}">Count</button>
  <button pp-suspense="{'style': {'backgroundColor': 'gray', 'borderRadius': '0'}}">Count</button> // Change the background color and border radius
  <button pp-suspense="{'targets': [{'id': '#element1', 'disabled': true}, {'id': '#element2', 'textContent': 'Loading...'}]}">Count</button> // Applies suspense to multiple elements specified by their IDs

Note: You can combine multiple attributes in a single pp-suspense attribute to perform multiple actions on an element. For example, you can change the text content, add or remove classes, disable the element, or insert HTML content at a specified position.

Example When Editing And Disabled Suspense

<form onsubmit="update" pp-suspense="{'disabled': true}">
    <input type="hidden" name="id" value="<?= $id ?>" />
    <input id="update-title" type="text" placeholder="Update todo..." name="title" value="<?= $title ?>" required />
    <button id="edit-button" pp-suspense="Editing...">Edit</button>
    <button onclick="cancelUpdate" type="button" pp-suspense="{'onsubmit': 'disabled', 'disabled': true, 'textContent': 'Canceling...', 'targets': [{'id':  '#edit-button', 'disabled': true}, {'id': '#update-title', 'disabled': true}]}">Cancel</button>
  </form>

Note: In the example above, when the submit button is clicked, the form is disabled and the submit button text is changed to Editing.... The Cancel button is also disabled and its text is changed to Canceling.... This provides a suspense state where the user knows that the form is being edited or canceled. By passing the targets array with the id of the elements, you can perform multiple actions on them simultaneously.

Example Usage With Input

<input oninput="functionName" pp-suspense="Loading..." pp-debounce="1s"/> // Will use value to show Loading...
  <input name="name" value="<?= $name ?>" oninput="functionName" pp-suspense="{'readonly': 'true', 'value': 'Loading...'}" pp-debounce="1s" />
  <input name="name" value="<?= $name ?>" oninput="functionName" pp-suspense="{'empty': 'disabled', 'value': 'Loading...'}" pp-debounce="1s" />

Note: In the example above, when the input value changes, the input is set to read-only and the value is changed to Loading.... This provides a suspense state where the user knows that the input is being processed or updated. You can also use the empty attribute to disable the suspense state when the input is empty.

Example Usage With Form

Form with suspense in parent

<form onsubmit="login" pp-suspense="{'disabled': true}">
    <input type="text" name="username" placeholder="Enter your username" required>
    <input type="password" name="password" placeholder="Enter your password" required>
    <button type="submit" pp-suspense="Loading...">Submit</button>
  </form>

Note: It's important to note that when you use suspense in a form on the parent element, it will disable the form and all its child elements. However, if you have suspense in child elements, it will only affect the specific element and not the entire form. This can be useful when you want to show loading indicators or disable specific form inputs while waiting for user input or processing data.

<form onsubmit="login" pp-suspense="{'textContent': 'Submitting...', 'classList.add': 'loading-overlay'}">
    <input type="text" name="username" placeholder="Enter your username" required>
    <input type="password" name="password" placeholder="Enter your password" required>
    <button type="submit">Submit</button>
  </form>

Note: It's good to know that you can use suspense with the "loading-overlay" class to show a loading indicator while submitting the form.

Form with suspense in child elements

<form onsubmit="login">
    <input type="text" name="username" placeholder="Enter your username" required pp-suspense="{'readonly': true}">
    <input type="password" name="password" placeholder="Enter your password" required pp-suspense="{'readonly': true}">
    <button type="submit" pp-suspense="{'disabled': true, 'textContent': 'Loading...'}">Submit</button>
  </form>

Applies suspense to multiple elements specified by their IDs

<button class="text-yellow-500 hover:text-yellow-600" onclick="isUpdateMode('true', '<?= $todo->id ?>', '<?= $todo->title ?>')" pp-suspense="{'targets': [{'id': '#edit-<?= $todo->id ?>', 'classList.add': 'hidden'}, {'id': '#spinner-update-<?= $todo->id ?>', 'classList.remove': 'hidden'}]}">
    <svg id="edit-<?= $todo->id ?>" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"   stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5">
          <path d="M20 5H9l-7 7 7 7h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2Z"></path>
          <line x1="18" x2="12" y1="9" y2="15"></line>
          <line x1="12" x2="18" y1="9" y2="15"></line>
      </svg>
    <svg id="spinner-update-<?= $todo->id ?>" xmlns="http://www.w3.org/2000/svg" class="spinner h-5 w-5 hidden" viewBox="0 0 24   24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle class="opacity-25" cx="12" cy="12" r="10"></circle>
          <path class="opacity-75" d="M12 2a10 10 0 1 1-1 19.94V18a8 8 0 1 0 1-15.94V2z"></path>
      </svg>
  </button>

Note: In the example above, when the button is clicked, the hidden class is added to the edit button and removed from the spinner icon. This provides a suspense state where the user knows that the edit button is being hidden and the spinner icon is being shown.

Note: When you use suspense in child elements, it will only affect the specific element and not the entire form. This allows you to apply suspense to individual form elements without affecting the form itself. This can be useful when you want to show loading indicators or disable specific form inputs while waiting for user input or processing data.