feat: add skeletons (#60)

public/app.css

@@ -268,6 +268,10 @@ ul {
   width: 100%;
 }
 
+.messages-list--skeleton {
+  overflow: hidden;
+}
+
 .messages-list {
   flex-grow: 1;
 }
@@ -396,11 +400,11 @@ ul {
   }
 } */
 
-.fadeIn {
-  animation: fadeIn 0.5s;
+.fade-in-below {
+  animation: fade-in-below 0.5s;
 }
 
-@keyframes fadeIn {
+@keyframes fade-in-below {
   0% {
     opacity: 0;
     transform: translate(0, 10vh);
@@ -412,6 +416,20 @@ ul {
   }
 }
 
+.fade-in {
+  animation: fade-in 0.5s;
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
 .row {
   display: flex;
   flex-wrap: wrap;
@@ -727,11 +745,11 @@ ul {
 }
 
 .avatar--round {
-  border-radius: 100%;
+  border-radius: 100% !important;
 }
 
 .avatar--semi-round {
-  border-radius: 20%;
+  border-radius: 20% !important;
 }
 
 .avatar--initial {
@@ -1376,4 +1394,71 @@ ul {
 
 .room-new__status-cta {
   width: 80%;
+}
+
+.skeleton {
+  opacity: .7;
+  animation: skeleton-loading 0.75s linear infinite alternate;
+  border-radius: 4px;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-color: hsl(200, 20%, 90%);
+  }
+
+  100% {
+    background-color: hsl(200, 20%, 95%);
+  }
+}
+
+.dropdown--skeleton {
+  width: 100%;
+}
+
+.message-wrapper--skeleton {
+  width: 100%;
+  padding: 14px;
+}
+
+.message__content--skeleton {
+  height: 12px;
+  width: 100%;
+}
+
+.message__time--skeleton {
+  height: 8px;
+  width: 14%;
+}
+
+.message__sender--skeleton {
+  height: 12px;
+  width: 40%;
+  margin-bottom: 4px;
+}
+
+.avatar--skeleton {
+  background: transparent;
+}
+
+.room-view__skeleton {
+  width: 100%;
+}
+
+.room-view__title--skeleton {
+  height: 12px;
+  width: 40%;
+}
+
+.room-view__message--skeleton {
+  height: 12px;
+  width: 60%;
+}
+
+.rooms-list--skeleton {
+  overflow: hidden;
+}
+
+.room-view-wrapper--skeleton {
+  width: 100%;
 }

src/components/atoms/messages/message_skeleton.rs

@@ -0,0 +1,64 @@
+use dioxus::prelude::*;
+
+use crate::services::matrix::matrix::EventOrigin;
+
+#[derive(PartialEq, Props)]
+pub struct MessageSkeletonProps {
+    pub origin: EventOrigin,
+}
+
+pub fn MessageSkeleton(cx: Scope<MessageSkeletonProps>) -> Element {
+    let dropdown_left = match cx.props.origin {
+        EventOrigin::ME => "",
+        EventOrigin::OTHER => "dropdown--left",
+    };
+
+    render!(rsx! {
+      div {
+        class: "dropdown {dropdown_left} dropdown--skeleton",
+        div {
+          class: "message-view",
+          // Header content (Avatar)
+          match &cx.props.origin {
+            EventOrigin::ME => None,
+            EventOrigin::OTHER => render!(
+                rsx!(
+                    div{
+                        class: "avatar avatar--round avatar--skeleton skeleton",
+                        style: "--avatar-size: 36px",
+                    }
+                )
+            )
+          }
+          article {
+            class: "message-wrapper message-wrapper--skeleton",
+            // Name sender content
+            match cx.props.origin {
+              EventOrigin::OTHER =>
+              render!(
+                rsx!(
+                  p {
+                    class: "message__sender message__sender--skeleton skeleton"
+                  }
+                )
+              ),
+              _ => None
+            }
+
+            div {
+                class: "message__container__content",
+                div{
+                    class: "message__content message__content--skeleton",
+                    p {
+                        class: "message__content message__content--skeleton skeleton-text skeleton",
+                    }
+                }
+                span {
+                    class: "message__time message__time--skeleton skeleton-text skeleton",
+                }
+            }
+          }
+        }
+      }
+    })
+}

src/components/atoms/messages/mod.rs

@@ -2,8 +2,10 @@ pub mod content;
 pub mod hover_menu;
 pub mod message;
 pub mod message_reply;
+pub mod message_skeleton;
 
 pub use content::*;
 pub use hover_menu::HoverMenu;
 pub use message::Message;
 pub use message_reply::MessageReply;
+pub use message_skeleton::MessageSkeleton;

src/components/atoms/mod.rs

@@ -12,6 +12,9 @@ pub mod menu_item;
 pub mod messages;
 pub mod notification;
 pub mod room;
+pub mod room_skeleton;
+pub mod space;
+pub mod space_skeleton;
 pub mod spinner;
 pub mod textarea;
 pub mod user;
@@ -30,6 +33,9 @@ pub use menu_item::MenuItem;
 pub use messages::*;
 pub use notification::Notification;
 pub use room::RoomView;
+pub use room_skeleton::RoomViewSkeleton;
+pub use space::Space;
+pub use space_skeleton::SpaceSkeleton;
 pub use spinner::Spinner;
 pub use textarea::TextareaInput;
 pub use user::UserProfile;

src/components/atoms/room.rs

@@ -24,7 +24,7 @@ pub fn RoomView<'a>(cx: Scope<'a, RoomViewProps<'a>>) -> Element<'a> {
 
     cx.render(rsx! {
       div {
-        class: "room-view",
+        class: "room-view fade-in",
         onclick: move |event| cx.props.on_click.call(event),
 
         Avatar {

src/components/atoms/room_skeleton.rs

@@ -0,0 +1,22 @@
+use dioxus::prelude::*;
+
+pub fn RoomViewSkeleton(cx: Scope) -> Element {
+    cx.render(rsx! {
+      div {
+        class: "room-view room-view__skeleton",
+        div{
+          class: "avatar avatar--round avatar--skeleton skeleton",
+          style: "--avatar-size: 50px",
+        }
+        article {
+          class: "room-view-wrapper room-view-wrapper--skeleton",
+          p {
+            class: "room-view__title room-view__title--skeleton skeleton",
+          }
+          p {
+            class: "room-view__message room-view__message--skeleton skeleton",
+          }
+        }
+      }
+    })
+}

src/components/atoms/space.rs

@@ -0,0 +1,26 @@
+use dioxus::prelude::*;
+
+use crate::components::atoms::{avatar::Variant, Avatar};
+
+#[derive(Props)]
+pub struct SpaceProps<'a> {
+    text: &'a str,
+    #[props(!optional)]
+    uri: Option<String>,
+    on_click: EventHandler<'a, MouseEvent>,
+}
+
+pub fn Space<'a>(cx: Scope<'a, SpaceProps<'a>>) -> Element<'a> {
+    render!(rsx!(
+        button {
+            class: "button button--tertiary padding-reset",
+            onclick: move |event| cx.props.on_click.call(event),
+            Avatar {
+                name: cx.props.text.to_string(),
+                size: 50,
+                uri: cx.props.uri.clone(),
+                variant: Variant::SemiRound
+            }
+        }
+    ))
+}

src/components/atoms/space_skeleton.rs

@@ -0,0 +1,16 @@
+use dioxus::prelude::*;
+
+#[inline_props]
+pub fn SpaceSkeleton(cx: Scope, size: u8) -> Element {
+    let size = format!("height: {}px; width: {}px;", size, size);
+
+    render!(rsx!(
+        button {
+            class: "button button--tertiary padding-reset skeleton",
+            div{
+                class: "avatar avatar--round avatar--skeleton skeleton",
+                style: "{size}",
+            }
+        }
+    ))
+}