added _animation for fade away for typing_notice

src/home/room_screen.rs

@@ -82,6 +82,7 @@ live_design! {
     COLOR_OVERLAY_BG = #x000000d8
     COLOR_READ_MARKER = #xeb2733
     COLOR_PROFILE_CIRCLE = #xfff8ee
+    TYPING_NOTICE_ANIMATION_DURATION = 1
 
     FillerY = <View> {width: Fill}
 
@@ -711,15 +712,15 @@ live_design! {
         }
 
 
-        <View> {
+        chat = <View> {
             width: Fill, height: Fill,
             flow: Overlay,
             show_bg: true
             draw_bg: {
                 color: (COLOR_PRIMARY_DARKER)
             }
 
-            <KeyboardView> {
+            keyboard = <KeyboardView> {
                 width: Fill, height: Fill,
                 flow: Down,
 
@@ -923,6 +924,21 @@ live_design! {
                 user_profile_sliding_pane = <UserProfileSlidingPane> { }
             }
         }
+        animator: {
+            typing_notice = {
+                default: default,
+                default = {
+                    redraw: true,
+                    from: { all: Forward { duration: (0) } }
+                    apply: { chat = { keyboard = { typing_notice = { height: 40 } } } }
+                }
+                collapse = {
+                    redraw: true,
+                    from: { all: Forward { duration: (TYPING_NOTICE_ANIMATION_DURATION) } }
+                    apply: { chat = { keyboard = { typing_notice = { height: 0 } } } }
+                }
+            }
+        }
     }
 }
 
@@ -939,6 +955,9 @@ struct RoomScreen {
     #[rust] tl_state: Option<TimelineUiState>,
     /// 5 secs timer when scroll ends
     #[rust] fully_read_timer: Timer,
+    #[animator] animator: Animator,
+    /// Animation Timer for Typing Notice
+    #[rust] typing_notice_timer: Timer,
 }
 
 impl RoomScreen{
@@ -1271,6 +1290,17 @@ impl Widget for RoomScreen {
             cx.stop_timer(self.fully_read_timer);
         }
 
+        if self.typing_notice_timer.is_event(event).is_some() {
+            cx.stop_timer(self.typing_notice_timer);
+            self.view(id!(typing_notice)).set_visible(false);
+            let typing_animation =  self.view.typing_animation(id!(typing_animation));
+            typing_animation.stop_animation();
+            self.animator_play(cx, id!(typing_notice.default));
+        }
+        if self.animator_handle_event(cx, event).must_redraw() {
+            self.redraw(cx);
+        }
+
         // Only forward visibility-related events (touch/tap/scroll) to the inner timeline view
         // if the user profile sliding pane is not visible.
         if event.requires_visibility() && pane.is_currently_shown(cx) {
@@ -1422,6 +1452,7 @@ impl RoomScreen {
 
         let mut done_loading = false;
         let mut num_updates = 0;
+        let mut is_typing = false;
         while let Ok(update) = tl.update_receiver.try_recv() {
             num_updates += 1;
             match update {
@@ -1544,15 +1575,11 @@ impl RoomScreen {
                             }
                         }
                     };
-                    let is_typing = !users.is_empty();
-                    self.view.view(id!(typing_notice)).set_visible(is_typing);
-                    self.view.label(id!(typing_label)).set_text(&typing_text);
-                    let typing_animation = self.view.typing_animation(id!(typing_animation));
-                    if is_typing {
-                        typing_animation.animate(cx);
-                    } else {
-                        typing_animation.stop_animation();
+                    is_typing = !users.is_empty();
+                    if typing_text != "" {
+                        self.view.label(id!(typing_label)).set_text(&typing_text);
                     }
+
                 }
             }
         }
@@ -1565,6 +1592,14 @@ impl RoomScreen {
             // log!("Applied {} timeline updates for room {}, redrawing with {} items...", num_updates, tl.room_id, tl.items.len());
             self.redraw(cx);
         }
+        if is_typing {
+            let typing_animation = self.view.typing_animation(id!(typing_animation));
+            self.view.view(id!(typing_notice)).set_visible(true);
+            typing_animation.animate(cx);
+        } else  {
+            self.start_typing_notice_animation(cx);
+        }
+
     }
 
     /// Shows the user profile sliding pane with the given avatar info.
@@ -1796,6 +1831,11 @@ impl RoomScreen {
         self.show_timeline(cx);
         self.label(id!(room_name)).set_text(&self.room_name);
     }
+    /// Start Typing Notice animation that fades away
+    pub fn start_typing_notice_animation(&mut self, cx: &mut Cx) {
+        self.animator_play(cx, id!(typing_notice.collapse));
+        self.typing_notice_timer = cx.start_interval(1.5);
+    }
 }
 
 impl RoomScreenRef {