Loading Indicator

A feature that displays a dynamic loading spinner overlay on the button to signal that a process is underway.

Overview

The Loading Indicator feature integrates a spinner animation into the SiticoneTileButton control. When activated, the loading indicator rotates over the button’s face, alerting users to background tasks such as data fetching or processing. The spinner's appearance, including its color, can be customized to match the application's design requirements.

---

Feature Properties Table

Property Name	Type	Default Value	Description
IsLoading	bool	false	Controls the visibility of the loading spinner overlay on the button.
LoadingColor	Color	Color.White	Sets the color of the loading spinner, ensuring it contrasts well against the button’s background.

---

Key Points

Aspect	Details
Visual Feedback	The loading indicator provides immediate visual feedback that a background operation is in progress.
Customizable Display	Developers can control both the activation (IsLoading) and the appearance (LoadingColor) of the spinner.
Integrated Animation	The spinner rotates smoothly based on an internal timer, ensuring consistent performance across state changes.

---

Best Practices

Practice	Explanation
Use IsLoading judiciously	Activate the loading indicator only during genuine background processes to avoid confusing users.
Choose a contrasting LoadingColor	Ensure the spinner is clearly visible by selecting a color that stands out against the button’s base and hover colors.
Reset the loading state when processes complete	Always disable IsLoading once the background operation has finished to restore normal button functionality.
Test responsiveness across devices	Verify that the spinner animation performs smoothly on different hardware configurations and screen resolutions.

---

Common Pitfalls

Pitfall	Recommendation
Leaving the spinner active indefinitely	Ensure that IsLoading is properly set to false after processes complete to prevent user confusion.
Poor color contrast for the loading spinner	Select a LoadingColor that provides clear visibility against the button’s background, particularly when using gradient effects.
Overlapping animations	If multiple animations are used concurrently (such as ripple effects and loading indicators), test for visual and performance conflicts.

---

Usage Scenarios

Scenario	Description
Data Fetching Operations	Display the loading indicator on a button that initiates a data request to inform users of the ongoing operation.
Form Submission or Processing	Use the spinner overlay on submission buttons to signal that the form data is being processed.
Content Refresh Actions	Indicate that content is being refreshed by activating the loading indicator on interactive buttons in dashboards or lists.

---

Code Examples

Example 1: Basic Loading Indicator Integration

This example demonstrates how to integrate the loading indicator with default settings. The spinner appears when a background operation is simulated.

using System;
using System.Drawing;
using System.Threading.Tasks;
using System.Windows.Forms;
using SiticoneNetFrameworkUI;

namespace LoadingIndicatorDemo
{
    public class MainForm : Form
    {
        public MainForm()
        {
            // Initialize the SiticoneTileButton with a loading indicator
            var loadingButton = new SiticoneTileButton
            {
                Text = "Load Data",
                Size = new Size(220, 150),
                Location = new Point(50, 50),
                
                // Loading Indicator settings
                IsLoading = false,
                LoadingColor = Color.White,
                
                // Color settings to contrast with the loading spinner
                BaseColor = Color.FromArgb(50, 150, 215),
                HoverColor = Color.FromArgb(70, 170, 235)
            };

            // Simulate a background operation on click
            loadingButton.Click += async (s, e) =>
            {
                loadingButton.IsLoading = true;
                // Simulate a delay (e.g., data fetching)
                await Task.Delay(3000);
                loadingButton.IsLoading = false;
            };

            Controls.Add(loadingButton);
        }

        [STAThread]
        static void Main()
        {
            Application.EnableVisualStyles();
            Application.Run(new MainForm());
        }
    }
}

Example 2: Customized Loading Indicator Appearance

This example shows how to customize the loading spinner's color to suit a dark-themed application.

using System;
using System.Drawing;
using System.Threading.Tasks;
using System.Windows.Forms;
using SiticoneNetFrameworkUI;

namespace CustomizedLoadingIndicatorDemo
{
    public class MainForm : Form
    {
        public MainForm()
        {
            // Initialize the SiticoneTileButton with a customized loading indicator
            var darkThemeButton = new SiticoneTileButton
            {
                Text = "Submit",
                Size = new Size(220, 150),
                Location = new Point(30, 30),
                
                // Customized Loading Indicator settings
                IsLoading = false,
                LoadingColor = Color.Yellow, // Bright color for dark background
                
                // Dark-themed color settings
                BaseColor = Color.FromArgb(30, 30, 30),
                HoverColor = Color.FromArgb(50, 50, 50)
            };

            // Simulate a processing operation on click
            darkThemeButton.Click += async (s, e) =>
            {
                darkThemeButton.IsLoading = true;
                // Simulate a delay (e.g., processing submission)
                await Task.Delay(2500);
                darkThemeButton.IsLoading = false;
            };

            Controls.Add(darkThemeButton);
        }

        [STAThread]
        static void Main()
        {
            Application.EnableVisualStyles();
            Application.Run(new MainForm());
        }
    }
}

---

Review

Aspect	Review Comments
Visual Feedback	The loading indicator effectively communicates that a background process is running, enhancing user confidence.
Customizability	With properties such as IsLoading and LoadingColor, the spinner can be easily adapted to various design requirements.
Integration Simplicity	The feature is straightforward to integrate via property assignments and event handlers, making it accessible even for novice developers.

---

Summary

The Loading Indicator feature of the SiticoneTileButton control provides a valuable visual cue that a process is underway. By setting the IsLoading property to true, a rotating spinner overlay appears on the button, with its color customizable through the LoadingColor property. This feature improves user experience by clearly indicating when the application is processing information, and it is especially useful for data fetching, form submissions, or any operation that requires a brief waiting period.

---

Additional Resources

Resource Category	Description
Integration Tips	Refer to the provided code examples to understand how to enable and control the loading indicator in your application.
UI/UX Considerations	Ensure the loading indicator is used only when necessary and that its color provides sufficient contrast against the button’s background.
Performance Optimization	Test the loading indicator on various hardware configurations to ensure smooth animations without affecting application performance.

---

By following these guidelines and examples, developers can seamlessly integrate and customize the Loading Indicator feature of the SiticoneTileButton control, thereby enhancing the responsiveness and interactivity of their .NET WinForms applications.