Esri
diff --git a/‎toolkit/popup/src/main/java/com/arcgismaps/toolkit/popup/Popup.kt
+19-28 b/‎toolkit/popup/src/main/java/com/arcgismaps/toolkit/popup/Popup.kt
+19-28
diff --git a/‎toolkit/popup/src/main/java/com/arcgismaps/toolkit/popup/internal/element/fieldselement/FieldsPopupElement.kt
+21-2 b/‎toolkit/popup/src/main/java/com/arcgismaps/toolkit/popup/internal/element/fieldselement/FieldsPopupElement.kt
+21-2
diff --git a/‎toolkit/popup/src/main/java/com/arcgismaps/toolkit/popup/internal/element/media/MediaElementState.kt
+105-46 b/‎toolkit/popup/src/main/java/com/arcgismaps/toolkit/popup/internal/element/media/MediaElementState.kt
+105-46
@@ -18,12 +18,7 @@
 
 package com.arcgismaps.toolkit.popup
 
-import androidx.compose.animation.AnimatedVisibility
-import androidx.compose.animation.core.Spring
 import androidx.compose.animation.core.animateFloatAsState
-import androidx.compose.animation.core.spring
-import androidx.compose.animation.fadeIn
-import androidx.compose.animation.fadeOut
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
@@ -34,13 +29,15 @@ import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.LinearProgressIndicator
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.Immutable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.Stable
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableLongStateOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
@@ -75,7 +72,6 @@ import com.arcgismaps.toolkit.popup.internal.element.textelement.TextPopupElemen
 import com.arcgismaps.toolkit.popup.internal.element.textelement.rememberTextElementState
 import com.arcgismaps.toolkit.popup.internal.ui.fileviewer.FileViewer
 import com.arcgismaps.toolkit.popup.internal.ui.fileviewer.ViewableFile
-import kotlinx.coroutines.delay
 
 @Immutable
 private data class PopupState(@Stable val popup: Popup)
@@ -117,16 +113,14 @@ private fun Popup(popupState: PopupState, modifier: Modifier = Modifier) {
     val dynamicEntity = (popup.geoElement as? DynamicEntity)
     var evaluated by rememberSaveable(popup) { mutableStateOf(false) }
     var fetched by rememberSaveable(popup) { mutableStateOf(false) }
-    var refreshed by rememberSaveable(dynamicEntity) { mutableStateOf(true) }
+    var lastUpdatedEntityId by rememberSaveable(dynamicEntity) { mutableLongStateOf(dynamicEntity?.id ?: -1) }
     if (dynamicEntity != null) {
         LaunchedEffect(popup) {
             dynamicEntity.dynamicEntityChangedEvent.collect {
-                refreshed = false
                 // briefly show the initializing screen so it is clear the entity just pulsed
                 // and values may have changed.
-                delay(300)
                 popupState.popup.evaluateExpressions()
-                refreshed = true
+                lastUpdatedEntityId = it.receivedObservation?.id ?: -1
             }
         }
     }
@@ -149,11 +143,11 @@ private fun Popup(popupState: PopupState, modifier: Modifier = Modifier) {
         evaluated = true
     }
 
-    Popup(popupState, evaluated && fetched, refreshed)
+    Popup(popupState, evaluated && fetched, lastUpdatedEntityId)
 }
 
 @Composable
-private fun Popup(popupState: PopupState, initialized: Boolean, refreshed: Boolean, modifier: Modifier = Modifier) {
+private fun Popup(popupState: PopupState, initialized: Boolean, refreshed: Long, modifier: Modifier = Modifier) {
     val scope = rememberCoroutineScope()
     val popup = popupState.popup
     val viewableFileState = rememberSaveable { mutableStateOf<ViewableFile?>(null) }
@@ -168,6 +162,7 @@ private fun Popup(popupState: PopupState, initialized: Boolean, refreshed: Boole
     ) {
         Text(
             text = popup.title,
+            color = MaterialTheme.colorScheme.onBackground,
             modifier = Modifier.padding(horizontal = 15.dp)
         )
         Spacer(
@@ -187,16 +182,22 @@ private fun Popup(popupState: PopupState, initialized: Boolean, refreshed: Boole
     }
 }
 
+/**
+ * The body of the Popup composable
+ *
+ * @param popupState the immutable state object containing the Popup.
+ * @param refreshed indicates that a new evaluation of elements has occurred. Only for DynamicEntity
+ * @param onFileClicked the callback to display an attachment or media image
+ */
 @Composable
 private fun PopupBody(
     popupState: PopupState,
-    refreshed: Boolean,
+    refreshed: Long,
     onFileClicked: (ViewableFile) -> Unit = {}
 ) {
     val popup = popupState.popup
     val lazyListState = rememberLazyListState()
     val states = rememberStates(popup, attachments)
-
     LazyColumn(
         modifier = Modifier
             .fillMaxSize()
@@ -226,20 +227,10 @@ private fun PopupBody(
 
                 is FieldsPopupElement -> {
                     item(contentType = FieldsPopupElement::class.java) {
-                        AnimatedVisibility(
-                            visible = refreshed,
-                            enter = fadeIn(
-                                animationSpec = spring(stiffness = Spring.StiffnessHigh)
-                            ),
-                            exit = fadeOut(
-                                animationSpec = spring(stiffness = Spring.StiffnessLow),
-                                targetAlpha = 0.5f
-                            )
-                        ) {
-                            FieldsPopupElement(
-                                entry.state as FieldsElementState,
-                            )
-                        }
+                        FieldsPopupElement(
+                            state = entry.state as FieldsElementState,
+                            refreshed = refreshed
+                        )
                     }
                 }
 
 
@@ -18,15 +18,20 @@ package com.arcgismaps.toolkit.popup.internal.element.fieldselement
 import android.content.Intent
 import android.net.Uri
 import android.util.Log
+import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.TweenSpec
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.text.ClickableText
 import androidx.compose.material3.ListItem
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.text.SpanStyle
 import androidx.compose.ui.text.buildAnnotatedString
@@ -41,11 +46,25 @@ import com.arcgismaps.toolkit.popup.internal.ui.ExpandableCard
  * @since 200.5.0
  */
 @Composable
-internal fun FieldsPopupElement(state: FieldsElementState) {
+internal fun FieldsPopupElement(
+    state: FieldsElementState,
+    refreshed: Long
+) {
+    val alphaAnimation = remember(refreshed) {
+        Animatable(0f)
+    }
+
+    LaunchedEffect(refreshed) {
+        alphaAnimation.animateTo(1f, animationSpec = TweenSpec(durationMillis = 1000))
+    }
+
     val localContext = LocalContext.current
     ExpandableCard(
         title = state.title,
         description = state.description,
+        modifier = Modifier.graphicsLayer {
+            alpha = alphaAnimation.value
+        }
     ) {
         Column {
             state.fieldsToFormattedValues.forEach {
@@ -105,6 +124,6 @@ private fun FieldsPopupElementPreview() {
         ),
         id = 0
     )
-    FieldsPopupElement(state)
+    FieldsPopupElement(state, 0L)
 }
 
@@ -39,11 +39,16 @@ import com.arcgismaps.mapping.popup.MediaPopupElement
 import com.arcgismaps.mapping.popup.Popup
 import com.arcgismaps.mapping.popup.PopupMedia
 import com.arcgismaps.mapping.popup.PopupMediaType
+import com.arcgismaps.realtime.DynamicEntity
 import com.arcgismaps.toolkit.popup.internal.element.state.PopupElementState
 import com.arcgismaps.toolkit.popup.internal.util.MediaImageProvider
 import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.delay
 import kotlinx.coroutines.launch
-import java.util.Objects
+import kotlinx.coroutines.withContext
+import java.io.File
+import java.util.UUID
 
 /**
  * Represents the state of an [MediaPopupElement]
@@ -67,55 +72,32 @@ internal class MediaElementState(
         description = mediaPopupElement.description,
         title = mediaPopupElement.title,
         media = mediaPopupElement.media.mapIndexed { index, media ->
+            val model = models.getOrNull(index) ?: ""
             if (media.type.isChart) {
-                PopupMediaState(
-                    media,
-                    scope,
-                    if (models.size > index) {
-                        models[index]
-                    } else {
-                        ""
-                    },
-                    MediaImageProvider(
-                        fileName = "media-${Objects.hash(mediaPopupElement.title, media.title, media.caption)}.png",
-                        folderName = mediaFolder
-                    ) {
-                        media.generateChart(chartParams).getOrThrow().image.bitmap
-                    }
-                )
-            } else if (media.type is PopupMediaType.Image) {
-                val srcUrl = media.value?.sourceUrl
-                    ?: throw IllegalArgumentException("null sourceUrl for popup media")
-                PopupMediaState(
-                    media,
-                    scope,
-                    if (models.size > index) {
-                        models[index]
-                    } else {
-                        ""
-                    },
-                    MediaImageProvider(
-                        fileName = "media-${Objects.hash(srcUrl)}",
-                        folderName = mediaFolder
-                    ) {
-                        val request = ImageRequest.Builder(context)
-                            .data(srcUrl)
-                            .crossfade(true)
-                            .build()
-                        (context.imageLoader.execute(request).drawable as? BitmapDrawable)?.bitmap
-                            ?: throw IllegalStateException("couldn't load image at $srcUrl")
-                    }
-                )
-
+                PopupMediaState.createChartMediaState(media, model, scope, mediaFolder, chartParams)
             } else {
-                throw IllegalArgumentException("unknown media type")
+                PopupMediaState.createImageMediaState(media, model, scope, mediaFolder, context)
             }
-
         }
     )
 
+    /**
+     * Update the PopupMedia so that a new chart image can be acquired. Only necessary
+     * for DynamicEntity Popups.
+     *
+     * @param newElement the new MediaPopupElement which contains the new PopupMedia
+     * @param scope the current CoroutineScope of the Composition.
+     */
+    internal fun updateMediaElement(newElement: MediaPopupElement, scope: CoroutineScope) {
+        newElement.media.forEachIndexed { index, medium ->
+            if (medium.type.isChart) {
+                media.getOrNull(index)?.updateMedia(medium, scope)
+            }
+        }
+    }
+
     companion object {
-        fun Saver(
+        internal fun Saver(
             element: MediaPopupElement,
             scope: CoroutineScope,
             chartFolder: String,
@@ -183,6 +165,13 @@ internal fun rememberMediaElementState(
             chartParams,
             context
         )
+    }.apply {
+        val geoElement = popup.geoElement
+        if (geoElement is DynamicEntity) {
+            // For dynamic entities
+            // update chart providers to use the new instances of PopupMedia to reacquire updated charts.
+            updateMediaElement(element, scope)
+        }
     }
 }
 
@@ -195,7 +184,8 @@ internal fun rememberMediaElementState(
  * @property linkUrl the link to use to view the media for image type media in the media viewer
  * @property sourceUrl the link to use to render the image for image type media
  * @property type the type of the PopupMedia
- * @property scope a CoroutineScope to use to acquire chart images
+ * @param uri the path to the media image omn disk, or empty if the image is not yet persisted.
+ * @param scope a CoroutineScope to use to acquire chart images
  * @property imageGenerator a lambda which generates charts. Is only invoked if type is chart.
  */
 internal class PopupMediaState(
@@ -206,7 +196,7 @@ internal class PopupMediaState(
     private val sourceUrl: String,
     val type: PopupMediaType,
     uri: String,
-    private val scope: CoroutineScope,
+    scope: CoroutineScope,
     private val imageGenerator: MediaImageProvider
 ) {
     private val _imageUri: MutableState<String> = mutableStateOf("")
@@ -221,7 +211,7 @@ internal class PopupMediaState(
             _imageUri.value = uri
         } else {
             scope.launch {
-                _imageUri.value = imageGenerator.get()
+                _imageUri.value = imageGenerator.get("${UUID.randomUUID()}.png")
             }
         }
     }
@@ -242,6 +232,75 @@ internal class PopupMediaState(
         scope = scope,
         imageGenerator = imageGenerator
     )
+
+    internal fun updateMedia(media: PopupMedia, scope: CoroutineScope) {
+        imageGenerator.media = media
+        scope.launch {
+            val oldMedia = File(_imageUri.value)
+            val img = imageGenerator.get("${UUID.randomUUID()}.png")
+            _imageUri.value = img
+            if (oldMedia.exists()) {
+                oldMedia.delete()
+            }
+        }
+    }
+
+    companion object {
+        internal fun createChartMediaState(
+            media: PopupMedia,
+            model: String,
+            scope: CoroutineScope,
+            imageFolder: String,
+            chartParams: ChartImageParameters
+        ): PopupMediaState = PopupMediaState(
+            media,
+            scope,
+            model,
+            MediaImageProvider(
+                folderName = imageFolder,
+                media = media,
+            ) {
+                it.generateChart(chartParams).getOrThrow().image.bitmap
+            }
+        )
+
+        internal fun createImageMediaState(
+            media: PopupMedia,
+            model: String,
+            scope: CoroutineScope,
+            imageFolder: String,
+            context: Context
+        ): PopupMediaState {
+            val srcUrl = media.value?.sourceUrl
+                ?: throw IllegalArgumentException("null sourceUrl for popup media")
+            return PopupMediaState(
+                media,
+                scope,
+                model,
+                MediaImageProvider(
+                    folderName = imageFolder,
+                    media = media
+                ) {
+                    val request = ImageRequest.Builder(context)
+                        .data(srcUrl)
+                        .crossfade(true)
+                        .build()
+                    (context.imageLoader.execute(request).drawable as? BitmapDrawable)?.bitmap
+                        ?: throw IllegalStateException("couldn't load image at $srcUrl")
+                }
+            ).apply {
+                if (refreshInterval > 0) {
+                    scope.launch {
+                        withContext(Dispatchers.IO) {
+                            // update the image according to the refresh interval
+                            delay(refreshInterval)
+                            updateMedia(media, scope)
+                        }
+                    }
+                }
+            }
+        }
+    }
 }
 
 private val PopupMediaType.isChart: Boolean