Offline Indicators

Audience: Developer

This guide outlines how we use various indicators to inform and guide the user if their device is offline.

Overview

There are a few primary indicators for when a user is offline:

• Snackbar
• Dialog
• Sync icons

Relevant Files

• OfflineDialog.tsx
• Snackbar.tsx

Relevant PRs

• PR #126: Offline indicators: Snackbar, Modal, Sync icons

Snackbar

Read more about the design and implementation in documentation from Material UI and Material.io.

The custom Snackbar.tsx component uses the Snackbar from Material-UI with a few custom overrides. By default, the Snackbar will hide after 5 seconds.

Props

• message is the message to display on the Snackbar
• withFab should be used for snackbars on screens with floating action buttons (i.e. CustomerMain, InventoryMain) as it adjusts the positioning of the snackbar to be above the FAB.
• noBottomMargin should be used on screens without the bototm navigation bar (i.e. Login) as it reduces the bottom spacing to position the snackbar lower on the screen.
• open is a boolean for whether or not the snackbar should show.
• disableAutoHide disables the 5 second auto-hide duration which makes the Snackbar show as long as the open prop is true.

Usage

Use the Snackbar component to:

• indicate why certain actions are disabled while offline (i.e. reviewing a purchase request that was created while offline)
• act as a non-disruptive disclaimer to the user to explain that certain screens may not be fully up to date if they are offline

Add the Snackbar component before the closing </BaseScreen> tag. To get the positioning to work, avoid placing it in a BaseScrollView.

The messagees typically start with "You are not connected to a network....". For consistency, try to stick to this convention.

// PurchaseRequest.tsx
<Snackbar
    open={showSnackbar}
    message="You are not connected to a network. Please reconnect to approve/deny this purchase request."
/>

OfflineDialog

The offline dialog is a pop-up modal that is designed to block the user from accessing/editing/viewing a screen. The custom OfflineDialog.tsx component uses the Dialog component from Material UI.

Props

• open is whether or not the dialog should show
• headingText is the text to display in the heading portion of the dialog
• bodyText is the text to display in the body portion of the dialog (typically more details to elaborate)
• closeAction is a function to call when the user presses the Go Back button on the dialog.

Usage

Use the OfflineDialog component to block the user from accessing/editing/viewing a screen. The dialog pops up in front of the app, which makes it much more disruptive than the Snackbar and is intended to be used for critical information.

In the example below on CustomerProfile.tsx, the dialog displays whenever the user is trying to view the profile of a customer that was created offline (does not have an Airtable ID). Dismissing the dialog sends the user back to the screen they came from, effectively blocking the user from viewing or editing anything related to the 'offline' customer.

// CustomerProfile.tsx
<OfflineDialog
    open={isOfflineId(inventory.id)}
    closeAction={history.goBack}
    headingText="New Inventory Data Offline"
    bodyText="Inventory cannot be edited until information has been uploaded. Connect to a network to add data."
/>

Read more about the design and implementation in documentation from Material UI and Material.io.

Sync icon

Sync icons are more subtle visual indicators (typically included on cards and lists) for records that were created offline that have not yet been uploaded to Airtable so they still have an 'offline id'. There isn't a standardized component for this, but the usage is very similar across the app.

// CustomerCard.tsx
<div className={classes.headingRowContainer}>
    <Typography variant="h2">{customer.customerNumber}, {customer.name}</Typography>
    {isOfflineId(customer.id) && <SyncIcon fontSize="small" className={classes.syncIcon} />}
</div>