# Offline Indicator Theme Component **URL:** https://meta.discourse.org/t/offline-indicator-theme-component/225130 **Category:** Theme component **Created:** [April 24, 2022, 3:06am UTC](https://meta.discourse.org/t/offline-indicator-theme-component/225130 "2022-04-24T03:06:07Z") **Posts on this page:** 9 **Page:** 1
### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don) #### Post date: [April 24, 2022, 3:06am UTC](https://meta.discourse.org/t/offline-indicator-theme-component/225130/1 "2022-04-24T03:06:07Z")
Hello 👋 This theme component is a simple offline indicator which appears when user have internet connection problems. ![Screenshot 2022-04-24 at 0.26.32](https://global.discourse-cdn.com/meta/original/4X/4/8/a/48a04ca0c2d16a2ac70bd6138511c1706ce1107a.png) ![Screenshot 2022-04-24 at 0.22.38](https://global.discourse-cdn.com/meta/original/4X/6/c/0/6c0e76df5649d29cb89856affb3a0b9ccdfa3ecc.png) ![Screenshot 2022-04-24 at 0.22.51](https://global.discourse-cdn.com/meta/original/4X/b/5/5/b55539f111a89625b2f10414c14f50f6ea8e57a3.png) On desktop the indicator shows on bottom right. **There are some settings which you can customize the indicator.** `offline indicator icon` You can use FontAwesome icons. This icon appear before **Oops…You’re offline** title. `offline indicator width` This width is only affect on desktop view. On mobile it use `width: calc(100% - 20px);` `offline indicator rounding` This is the indicator border radius. You can make the corners rounded if increase the value. ![Screenshot 2022-04-24 at 1.00.07](https://global.discourse-cdn.com/meta/original/4X/b/0/0/b002fdc9d3321646ce47a30dc74ba40eb35b4bbe.png) **And translations…** ![Screenshot 2022-04-24 at 0.16.55](https://global.discourse-cdn.com/meta/original/4X/0/3/4/034ebbd9789bdfdad2044dc8a8a340d7d8380dde.png) | | | | | --- | --- | --- | | 🛠 | **Repository** | [GitHub - VaperinaDEV/discourse-offline-indicator](https://github.com/VaperinaDEV/discourse-offline-indicator) | | ❓ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) | | 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) | ---
### Author: ![Paracelsus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/paracelsus/32/164912_2.png) [@Paracelsus](https://meta.discourse.org/u/Paracelsus) #### Post date: [April 25, 2022, 5:17pm UTC](https://meta.discourse.org/t/offline-indicator-theme-component/225130/2 "2022-04-25T17:17:01Z")
Hi, does this work upon forum rebuilds (meaning the 5-6 minutes it usually takes)? ---
### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger) #### Post date: [April 25, 2022, 5:21pm UTC](https://meta.discourse.org/t/offline-indicator-theme-component/225130/3 "2022-04-25T17:21:29Z")
This is a theme component, so you can add it from the `/admin/customize/themes` page with no need for a rebuild. 👍 ---
### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin) #### Post date: [April 25, 2022, 5:25pm UTC](https://meta.discourse.org/t/offline-indicator-theme-component/225130/4 "2022-04-25T17:25:01Z")
I think he’s asking if the message is shown _during_ a rebuild. ---
### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger) #### Post date: [April 25, 2022, 5:29pm UTC](https://meta.discourse.org/t/offline-indicator-theme-component/225130/5 "2022-04-25T17:29:35Z")
Doh. 🤦‍♂️ Yes. That does indeed make much more sense. 🙂 My bad. ---
### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don) #### Post date: [April 25, 2022, 6:00pm UTC](https://meta.discourse.org/t/offline-indicator-theme-component/225130/6 "2022-04-25T18:00:14Z")
Hello, This one will not shown during rebuild. I used to create an offline indicator with [offline.js](https://github.hubspot.com/offline/docs/welcome/) that is always checks favicon, makes requests so that shown during rebuild too. But that seems to unnecessary to this feature for me and also can confuse users where is the problem? Server side or with their internet connection. I believe you can do this with global notice too. Just add a notice before rebuild. 🙂 ---
### Author: ![Kuro22](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kuro22/32/261055_2.png) [@Kuro22](https://meta.discourse.org/u/Kuro22) #### Post date: [April 29, 2022, 8:23am UTC](https://meta.discourse.org/t/offline-indicator-theme-component/225130/7 "2022-04-29T08:23:17Z")
Thank you so much for this great component! 😀 ---
### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster) #### Post date: [August 7, 2026, 7:24am UTC](https://meta.discourse.org/t/offline-indicator-theme-component/225130/8 "2026-08-07T07:24:43Z")
FYI: ```plaintext [Admin Notice] Theme 'Offline Indicator Theme Component' contains code which needs updating. (id:discourse.hbs-extension) ``` ---
### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don) #### Post date: [August 13, 2026, 12:19am UTC](https://meta.discourse.org/t/offline-indicator-theme-component/225130/9 "2026-08-13T00:19:56Z")
Here is the update: [Merge pull request #2 from davidkingham/convert-hbs-connector-to-gjs · VaperinaDEV/discourse-offline-indicator@29bde62 · GitHub](https://github.com/VaperinaDEV/discourse-offline-indicator/commit/29bde625ad5ba7120242f06573ecdc3a58ca4cc0) Thanks for the PR @davidkingham ❤