Dashboard Warning Card Keeps Reloading When Sorting by Date

Configuration Frontend
1

Hi everyone,

I’m working on a smart mirror dashboard where I’m trying to display warnings directly pulled from a JSON file. These warnings include motion notifications (with an image) and other types of alerts like errors or info messages. The goal is to display this data in real-time, cleanly organized.

What I’m Trying to Achieve

  • Display motion notifications with location, timestamp, and an associated image.
  • Show other notifications (e.g., errors or info messages) sorted by timestamp, limited to the most recent five.
  • Directly process the JSON data in the dashboard without relying on additional sensors or helpers.

JSON Setup

The JSON data looks like this:

{
  "notifications": [
    {
      "type": "motion",
      "timestamp": "2024-12-20T15:30:45",
      "source": "Front Camera",
      "file_url": "https://example.com/image.jpg"
    },
    {
      "type": "error",
      "timestamp": "2024-12-20T14:00:00",
      "description": "Battery low"
    },
    {
      "type": "info",
      "timestamp": "2024-12-20T13:45:00",
      "description": "New firmware available"
    }
  ]
}

The JSON is directly loaded into the dashboard card without intermediate processing.

My Current Card Code

Here’s the YAML configuration for my warning card:

- type: vertical-stack
  view_layout:
    grid-area: main1
  cards:
    - type: markdown
      title: Warnings
      content: >
        {% set notifications = state_attr('sensor.notifications', 'notifications') %}
        {% if notifications %}
        {% set motion_notifications = notifications | selectattr('type', 'eq', 'motion') | list %}
        {% set other_notifications = notifications | rejectattr('type', 'eq', 'motion') | list %}
        {% set sorted_other_notifications = other_notifications | sort(attribute='timestamp', reverse=True) | slice(0, 5) %}
        
        ### Latest Motion:
        {% if motion_notifications %}
        {% set latest_motion = motion_notifications[-1] %}
        ![Latest Motion]({{ latest_motion.file_url }})
        _**Location:** {{ latest_motion.source }} - **Time:** {{ latest_motion.timestamp.split('T')[1].split(':')[:2] | join(':') }}_
        {% else %}
        No motion detected.
        {% endif %}
        
        ### Other Notifications:
        {% if sorted_other_notifications %}
        {% for notification in sorted_other_notifications %}
          **Date:** {{ notification.timestamp.split('T')[0] }}
          **Message:** {{ notification.description }}
        {% endfor %}
        {% else %}
        No other notifications available.
        {% endif %}
        {% else %}
        No notifications available.
        {% endif %}
      card_mod:
        style: |
          ha-card {
            background: rgba(64, 64, 64, 0.7) !important;
            color: white;
            padding: 16px;
          }

The Problem

The card keeps reloading (flashing) repeatedly. Based on my debugging, I suspect the issue lies in this line:

{% set sorted_other_notifications = other_notifications | sort(attribute='timestamp', reverse=True) | slice(0, 5) %}

When I remove the slice(0, 5) part and display all notifications, the card works fine without reloading.

My Questions

  1. Why does sorting or slicing the data seem to cause this reloading issue?
  2. Is there a way to fix this while still displaying only the five most recent notifications?
  3. Are there more efficient ways to handle this kind of data processing directly within the dashboard?

Thank you in advance for your help and suggestions! :blush: