Page Comparison

We've implemented a more conservative caching approach by disabling automatic data revalidations in the global SWR configuration. This change:

• Reduces unnecessary network requests for patient chart data that rarely changes

• Improves development debugging by reducing network noise

• Enhances UI responsiveness during data mutations

Technical details:

• We've modified the global SWR configuration to disable most automatic revalidations by default

• We've maintained the ability to override the default caching strategy through child SWRConfig components. The SWRConfig component merges configurations from child components with the parent configuration, meaning that any child component can override the default caching strategy by providing its own configuration options. This means that it's still possible to opt-in to more aggressive automatic revalidation if needed.

With this change, we're seeing a pretty significant performance improvement in loading the app and its perceived snappiness.

Redesigned single-page login flow

• The login experience has been redesigned as a single-page flow for better user experience. When a user first arrives, they see only the username field. After entering their username, the password field smoothly appears below it.

  The login page features a new attribution footer, positioned discretely in the bottom left corner. This footer contains four distinct elements in sequence:

  • The text "Built with"

  • The standard OpenMRS logo sprite

  • The descriptive text "An open-source medical record system and global community

  • A "Learn more" link that takes users to the OpenMRS website

• Each logo object includes:

  • url - direct path to the logo image

  • altText - accessible description of the logo for screen readers

  • width - logo width in pixels

  • height - logo height in pixels

  Implementation-specific logos, when configured in the login page configuration, will appear in the bottom right corner of the page, creating a balanced layout opposite to the attribution footer. These logos can be customized through the login page configuration.

  All elements in the footer maintain consistent styling with the rest of the interface while ensuring clear visibility and accessibility.

Customizable implementation logos

You can now add custom logos for your implementation to the Login page through configuration. These logos appear in the footer, displayed sequentially after the default OpenMRS sprite.

Configuration details

Add logos by including an additionalLogos array in the login page configuration:

{
  "footer": {
    "additionalLogos": [
      {
        "url": "path/to/logo.png",
        "altText": "Organization Name",
        "width": 100,
        "height": 50
      }
    ]
  }
}

• Each logo object includes:

  • url - direct path to the logo image

  • altText - accessible description of the logo for screen readers

  • width - logo width in pixels

  • height - logo height in pixels

These logos appear in the same orders as they are defined in the array. All the logos are positioned after the default OpenMRS sprite. Each logo maintains its specified dimensions while respecting responsive design principles. The list of logos is then displayed in the bottom right hand corner of the login page, opposite the attribution footer.

These changes provide a balanced way for implementations to maintain both OpenMRS identity and their own individual branding on the login page.

The patient header has been updated with improved visual elements and a clearer information hierarchy:

Patient Avatar

• Has three distinct states:

  • Loading: Shows while the avatar image is being fetched

  • Empty state: Displays a placeholder when an image source exists but fails to load (possibly due to a server issue)

  • Loaded state: Presents the patient image in a consistent 56px × 56px format

Patient Information

• Improved gender representation through the following elements:

  • Icon matching patient's gender

  • Abbreviated gender text beside the icon

  • Refined identifier display:

  • Primary identifier shown in a gray pill container

  • Secondary identifiers presented in a clean, middot-separated list

Interactive Elements

• Updated details panel toggle that now reads "Show more" and "Show less". Previously, the toggle button label read as "Show details" and "Hide details".