Add bouncing loader and showing while the page is loading

With the loading icon, users will have a clear visual indication that the page is loading, reducing frustration and uncertainty.
tweedegolf · Jun 22, 2023 · fd352f8 · fd352f8
1 parent 9d3e4a1
commit fd352f8
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 0 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -10,5 +10,10 @@
     <link data-trunk rel="copy-dir" href="img" />
   </head>
   <body>
+    <div class="bouncing-loader">
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
   </body>
 </html>
diff --git a/frontend/src/overview.rs b/frontend/src/overview.rs
@@ -16,6 +16,7 @@ pub enum Msg {
     Message(Box<MailMessageMetadata>),
     Messages(Vec<MailMessageMetadata>),
     Remove(String),
+    Loading(bool),
     RemoveAll,
 }
 
@@ -32,6 +33,7 @@ pub struct Overview {
     tab: Tab,
     messages: Vec<MailMessageMetadata>,
     sender: Sender<Action>,
+    loading: bool,
 }
 
 impl Component for Overview {
@@ -40,9 +42,11 @@ impl Component for Overview {
 
     fn create(ctx: &Context<Self>) -> Self {
         let link = ctx.link().clone();
+        link.send_message(Msg::Loading(true));
         spawn_local(async move {
             let messages = fetch_messages_metadata().await;
             link.send_message(Msg::Messages(messages));
+            link.send_message(Msg::Loading(false));
         });
 
         let mut wss = WebsocketService::new();
@@ -59,11 +63,15 @@ impl Component for Overview {
             tab: Tab::Formatted,
             selected: Default::default(),
             sender: wss.sender,
+            loading: true,
         }
     }
 
     fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
         match msg {
+            Msg::Loading(value) => {
+                self.loading = value;
+            }
             Msg::Message(message) => {
                 self.messages.push(*message);
             }
@@ -128,7 +136,15 @@ impl Component for Overview {
             </header>
             if self.messages.is_empty() {
               <div class="empty">
+                if self.loading {
+                    <div class="bouncing-loader">
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                    </div>
+                } else {
                     { "The inbox is empty 📭" }
+                }
               </div>
             } else {
               <div class="main">

diff --git a/frontend/style.scss b/frontend/style.scss
@@ -424,3 +424,44 @@ header {
     }
   }
 }
+
+.bouncing-loader {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+@keyframes bouncing-loader {
+  to {
+    opacity: 0.1;
+  }
+}
+.bouncing-loader {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  margin-top: auto;
+}
+.bouncing-loader > div {
+  width: 1rem;
+  height: 1rem;
+  margin: 3rem 0.25rem;
+  background: #f74c00;
+  border-radius: 50%;
+  -webkit-animation: bouncing-loader 0.6s infinite alternate;
+  -ms-animation: bouncing-loader 0.6s infinite alternate;
+  animation: bouncing-loader 0.6s infinite alternate;
+}
+.bouncing-loader > div:nth-child(2) {
+  -webkit-animation-delay: 0.2s;
+  -ms-animation-delay: 0.2s;
+  animation-delay: 0.2s;
+}
+.bouncing-loader > div:nth-child(3) {
+  -webkit-animation-delay: 0.4s;
+  -ms-animation-delay: 0.4s;
+  animation-delay: 0.4s;
+}