การใช้งาน Activity Indicator: แสดงสถานะ Loading

ในบทที่แล้ว เราได้เรียนรู้วิธีการดึงข้อมูลจาก API ด้วย useEffect และ useState พร้อมทั้งจัดการ Loading State และ Error Handling เพื่อให้ผู้ใช้ได้รับประสบการณ์ที่ดี ในบทนี้ เราจะมาเจาะลึกเรื่องการแสดงสถานะ Loading ให้ชัดเจนยิ่งขึ้น โดยใช้ ActivityIndicator Component ของ React Native เพื่อบ่งบอกให้ผู้ใช้ทราบว่าแอปพลิเคชันกำลังทำงานอยู่ และรอข้อมูล

ActivityIndicator คืออะไร?

ActivityIndicator คือ Component พื้นฐานของ React Native ที่ใช้แสดง Animation รูปแบบวงกลมหมุน (spinner) เพื่อบ่งบอกว่าแอปพลิเคชันกำลังทำงานอยู่เบื้องหลัง เช่น กำลังดึงข้อมูลจาก Server, ประมวลผลข้อมูล หรือรอการตอบสนองจาก API ซึ่งการแสดง ActivityIndicator ช่วยลดความสับสนของผู้ใช้ และทำให้ผู้ใช้ทราบว่าแอปพลิเคชันไม่ได้ค้าง แต่กำลังทำงานอยู่

การใช้งาน ActivityIndicator Component

การใช้งาน ActivityIndicator นั้นง่ายมาก เพียงแค่ import Component นี้จาก react-native แล้วใส่ไว้ใน JSX ของ Component ที่ต้องการแสดงสถานะ Loading

import React, { useState, useEffect } from 'react';
import { View, Text, ActivityIndicator, StyleSheet } from 'react-native';

const MyComponent = () => {
  const [isLoading, setIsLoading] = useState(true); // กำหนด State สำหรับสถานะ Loading
  const [data, setData] = useState(null);

  useEffect(() => {
    // จำลองการดึงข้อมูลจาก API
    setTimeout(() => {
      setData({ message: 'Data loaded successfully!' });
      setIsLoading(false); // เปลี่ยนสถานะ Loading เมื่อข้อมูลโหลดเสร็จ
    }, 2000);
  }, []);

  return (
    <View style={styles.container}>
      {isLoading ? (
        <ActivityIndicator size="large" color="#0000ff" />
      ) : (
        <Text>{data?.message}</Text>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default MyComponent;

อธิบายโค้ด:

isLoading: State ที่ใช้ควบคุมการแสดงผลของ ActivityIndicator หากเป็น true จะแสดง ActivityIndicator หากเป็น false จะแสดงเนื้อหาอื่น (ในที่นี้คือข้อความจาก data)
useEffect: Hook ที่ใช้จำลองการดึงข้อมูลจาก API โดยใช้ setTimeout เพื่อหน่วงเวลา 2 วินาที เมื่อข้อมูล "โหลด" เสร็จแล้ว จะเปลี่ยน isLoading เป็น false
ActivityIndicator: Component ที่แสดง Animation Loading โดยมี Props ที่สำคัญคือ size (ขนาดของ Animation) และ color (สีของ Animation)

ในตัวอย่างนี้ เราใช้ Conditional Rendering (isLoading ? ... : ...) เพื่อสลับการแสดงผลระหว่าง ActivityIndicator และเนื้อหาจริง เมื่อ isLoading เป็น true จะแสดง ActivityIndicator เมื่อเป็น false จะแสดงข้อความที่โหลดมาได้

การควบคุมการแสดงผลด้วย State

การใช้ State เพื่อควบคุมการแสดงผลของ ActivityIndicator เป็นแนวทางปฏิบัติที่ดี เพราะช่วยให้เราสามารถจัดการสถานะ Loading ได้อย่างแม่นยำ และปรับเปลี่ยนการแสดงผลได้ตามต้องการ ตัวอย่างเช่น เราสามารถแสดง ActivityIndicator เมื่อเริ่มดึงข้อมูล และซ่อนเมื่อดึงข้อมูลเสร็จ หรือเกิดข้อผิดพลาด

Trade-off ที่ต้องพิจารณาคือ การจัดการ State ที่ถูกต้อง เพื่อให้แน่ใจว่า ActivityIndicator จะแสดงในเวลาที่เหมาะสม และซ่อนเมื่อไม่จำเป็น การจัดการ State ที่ไม่ดี อาจทำให้ ActivityIndicator แสดงค้าง หรือไม่แสดงเลยเมื่อควรจะแสดง

การปรับแต่ง Style ของ ActivityIndicator

ActivityIndicator มี Props ให้เราปรับแต่ง Style ได้เล็กน้อย เช่น size และ color แต่ถ้าต้องการปรับแต่ง Style ให้ละเอียดกว่านี้ เราสามารถใช้ StyleSheet ร่วมกับ ActivityIndicator ได้ โดยการครอบ ActivityIndicator ด้วย View แล้วกำหนด Style ให้กับ View นั้น

import React, { useState, useEffect } from 'react';
import { View, Text, ActivityIndicator, StyleSheet } from 'react-native';

const MyComponent = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [data, setData] = useState(null);

  useEffect(() => {
    // จำลองการดึงข้อมูลจาก API
    setTimeout(() => {
      setData({ message: 'Data loaded successfully!' });
      setIsLoading(false);
    }, 2000);
  }, []);

  return (
    <View style={styles.container}>
      {isLoading ? (
        <View style={styles.loadingContainer}>
          <ActivityIndicator size="large" color="#ffffff" />
          <Text style={styles.loadingText}>กำลังโหลดข้อมูล...</Text>
        </View>
      ) : (
        <Text>{data?.message}</Text>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  loadingContainer: {
    backgroundColor: 'rgba(0, 0, 0, 0.5)', // พื้นหลังโปร่งแสง
    padding: 20,
    borderRadius: 10,
    alignItems: 'center',
  },
  loadingText: {
    color: '#ffffff',
    marginTop: 10,
  },
});

export default MyComponent;

อธิบายโค้ด:

loadingContainer: Style ที่กำหนดให้กับ View ที่ครอบ ActivityIndicator และ Text เพื่อสร้างพื้นหลังโปร่งแสงและจัด Layout ให้สวยงาม
loadingText: Style ที่กำหนดให้กับ Text ที่แสดงข้อความ "กำลังโหลดข้อมูล..." เพื่อให้มีสีขาวและอยู่ห่างจาก ActivityIndicator เล็กน้อย

การครอบ ActivityIndicator ด้วย View ช่วยให้เราสามารถปรับแต่ง Style ได้หลากหลายมากขึ้น เช่น การกำหนดพื้นหลัง, การจัด Layout, การใส่ Padding และ Margin

เหตุผลเชิงออกแบบและแนวปฏิบัติที่ดี

ให้ข้อมูลที่ชัดเจน: การแสดง ActivityIndicator ควรมาพร้อมกับข้อความที่อธิบายว่าแอปพลิเคชันกำลังทำอะไรอยู่ เช่น "กำลังโหลดข้อมูล...", "กำลังบันทึก...", "กำลังตรวจสอบ..." เพื่อให้ผู้ใช้เข้าใจสถานะของแอปพลิเคชัน
ตำแหน่งที่เหมาะสม: ควรวาง ActivityIndicator ในตำแหน่งที่เด่นชัด และไม่บดบังเนื้อหาที่สำคัญ
ระยะเวลาที่เหมาะสม: ควรแสดง ActivityIndicator เฉพาะในช่วงเวลาที่จำเป็นเท่านั้น หากการโหลดข้อมูลใช้เวลานานเกินไป ควรพิจารณาแสดง Progress Bar หรือแจ้งเตือนให้ผู้ใช้ทราบ
Error Handling: หากเกิดข้อผิดพลาดในการโหลดข้อมูล ควรซ่อน ActivityIndicator และแสดงข้อความแจ้งเตือนให้ผู้ใช้ทราบ
Performance: การแสดง ActivityIndicator ที่ซับซ้อน หรือมี Animation ที่ใช้ทรัพยากรมาก อาจส่งผลต่อ Performance ของแอปพลิเคชัน ควรเลือกใช้ ActivityIndicator ที่มีประสิทธิภาพ และหลีกเลี่ยงการแสดง ActivityIndicator จำนวนมากพร้อมกัน

สรุป

ในบทนี้ เราได้เรียนรู้วิธีการใช้งาน ActivityIndicator Component เพื่อแสดงสถานะ Loading ในแอปพลิเคชัน React Native การใช้ ActivityIndicator ช่วยให้ผู้ใช้ทราบว่าแอปพลิเคชันกำลังทำงานอยู่ และช่วยลดความสับสน การควบคุมการแสดงผลด้วย State ช่วยให้เราสามารถจัดการสถานะ Loading ได้อย่างแม่นยำ และการปรับแต่ง Style ช่วยให้เราสามารถออกแบบ ActivityIndicator ให้เข้ากับ Theme ของแอปพลิเคชันได้

ในบทถัดไป เราจะมาเรียนรู้เรื่องการสร้าง Custom Component เพื่อสร้าง Component ที่เราสามารถนำกลับมาใช้ใหม่ได้ และปรับแต่งได้ตามต้องการ