bug: After running flet web, when I refreshed the Android phone's browser for the second time to access loading-animation.png, it was not centered

[FeodorFitsner]

Duplicate Check

• I have searched the opened issues and there are no duplicates

Describe the bug

1

Code sample

Code

[Paste your code here]

To reproduce

1

Expected behavior

No response

Screenshots / Videos

Captures

[Upload media here]

Operating System

Windows

Operating system details

11

Flet version

0.80.2

Regression

No, it isn't

Suggestions

No response

Logs

Logs

[Paste your logs here]

Additional details

No response

[tedthebot]

Thanks for the report! The issue body looks empty, so we can’t reproduce yet. Could you share:

• Minimal code sample that shows the loading animation (remove unrelated parts)
• Exact steps to reproduce (including how you start the app: e.g. flet run --web, flet run, build, etc.)
• Expected vs actual behavior (what should be centered, what isn’t)
• Screenshot or short screen recording of first vs second refresh
• Browser/Device info (Android model, browser name/version)
• Any console logs from the mobile browser (or server logs) on the second refresh

Once we have those, we can dig in.

[FeodorFitsner]

Holly molly, I don't have all this information, jeez!

[FeodorFitsner]

OK, OK, this:

import os
from datetime import datetime
import flet as ft

# constants
FLET_APP_STORAGE_DATA = os.getenv("FLET_APP_STORAGE_DATA")
COUNTER_FILE_PATH = os.path.join(FLET_APP_STORAGE_DATA, "counter.txt")
FLET_APP_CONSOLE = os.getenv("FLET_APP_CONSOLE")


class Counter(ft.Text):
    def __init__(self, storage_path=COUNTER_FILE_PATH):
        super().__init__(theme_style=ft.TextThemeStyle.HEADLINE_LARGE)
        self.storage_path = storage_path
        self.count = self.__read_from_storage()

    def increment(self):
        """Increment the counter, store the new value, and return it."""
        self.count += 1
        self.update()
        self.__write_to_storage()

    def before_update(self):
        super().before_update()
        self.value = f"Button tapped {self.count} time{'' if self.count == 1 else 's'}"

    def __log(self, action: str, value: int = None):
        """Log executed action."""
        if value is None:
            value = self.count
        print(f"{datetime.now().strftime('%Y/%m/%d %H:%M:%S')} - {action} = {value}")

    def __read_from_storage(self):
        """Read counter value. If an error occurs, use 0."""
        try:
            with open(self.storage_path, "r") as f:
                value = int(f.read().strip())
        except (FileNotFoundError, ValueError):
            # file does not exist or int parsing failed
            value = 0

        self.__log("READ", value)
        return value

    def __write_to_storage(self):
        """Write current counter value to storage."""
        with open(self.storage_path, "w") as f:
            f.write(str(self.count))
        self.__log("WRITE")


def main(page: ft.Page):
    page.theme_mode = ft.ThemeMode.LIGHT
    page.vertical_alignment = ft.MainAxisAlignment.CENTER
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER

    def show_logs(e: ft.ControlEvent):
        if FLET_APP_CONSOLE is not None:
            with open(FLET_APP_CONSOLE, "r") as f:
                dlg = ft.AlertDialog(
                    title=ft.Text("App Logs"),
                    content=ft.Text(f.read()),
                    scrollable=True,
                )
                page.open(dlg)

    counter = Counter()
    page.appbar = ft.AppBar(
        title=ft.Text("Storage Playground", weight=ft.FontWeight.BOLD),
        center_title=True,
        bgcolor=ft.Colors.BLUE,
        color=ft.Colors.WHITE,
        adaptive=True,
        actions=[
            ft.IconButton(
                icon=ft.Icons.REMOVE_RED_EYE,
                tooltip="Show logs",
                visible=FLET_APP_CONSOLE is not None,
                on_click=show_logs,
            ),
        ],
    )
    page.floating_action_button = ft.FloatingActionButton(
        icon=ft.Icons.ADD,
        foreground_color=ft.Colors.WHITE,
        bgcolor=ft.Colors.BLUE,
        on_click=lambda e: counter.increment(),
    )
    page.floating_action_button_location = ft.FloatingActionButtonLocation.CENTER_FLOAT

    page.add(ft.SafeArea(counter))


ft.run(main)

[FeodorFitsner]

Let's try again:

import os
from datetime import datetime
import flet as ft

# constants
FLET_APP_STORAGE_DATA = os.getenv("FLET_APP_STORAGE_DATA")
COUNTER_FILE_PATH = os.path.join(FLET_APP_STORAGE_DATA, "counter.txt")
FLET_APP_CONSOLE = os.getenv("FLET_APP_CONSOLE")


class Counter(ft.Text):
    def __init__(self, storage_path=COUNTER_FILE_PATH):
        super().__init__(theme_style=ft.TextThemeStyle.HEADLINE_LARGE)
        self.storage_path = storage_path
        self.count = self.__read_from_storage()

    def increment(self):
        """Increment the counter, store the new value, and return it."""
        self.count += 1
        self.update()
        self.__write_to_storage()

    def before_update(self):
        super().before_update()
        self.value = f"Button tapped {self.count} time{'' if self.count == 1 else 's'}"

    def __log(self, action: str, value: int = None):
        """Log executed action."""
        if value is None:
            value = self.count
        print(f"{datetime.now().strftime('%Y/%m/%d %H:%M:%S')} - {action} = {value}")

    def __read_from_storage(self):
        """Read counter value. If an error occurs, use 0."""
        try:
            with open(self.storage_path, "r") as f:
                value = int(f.read().strip())
        except (FileNotFoundError, ValueError):
            # file does not exist or int parsing failed
            value = 0

        self.__log("READ", value)
        return value

    def __write_to_storage(self):
        """Write current counter value to storage."""
        with open(self.storage_path, "w") as f:
            f.write(str(self.count))
        self.__log("WRITE")


def main(page: ft.Page):
    page.theme_mode = ft.ThemeMode.LIGHT
    page.vertical_alignment = ft.MainAxisAlignment.CENTER
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER

    def show_logs(e: ft.ControlEvent):
        if FLET_APP_CONSOLE is not None:
            with open(FLET_APP_CONSOLE, "r") as f:
                dlg = ft.AlertDialog(
                    title=ft.Text("App Logs"),
                    content=ft.Text(f.read()),
                    scrollable=True,
                )
                page.open(dlg)

    counter = Counter()
    page.appbar = ft.AppBar(
        title=ft.Text("Storage Playground", weight=ft.FontWeight.BOLD),
        center_title=True,
        bgcolor=ft.Colors.BLUE,
        color=ft.Colors.WHITE,
        adaptive=True,
        actions=[
            ft.IconButton(
                icon=ft.Icons.REMOVE_RED_EYE,
                tooltip="Show logs",
                visible=FLET_APP_CONSOLE is not None,
                on_click=show_logs,
            ),
        ],
    )
    page.floating_action_button = ft.FloatingActionButton(
        icon=ft.Icons.ADD,
        foreground_color=ft.Colors.WHITE,
        bgcolor=ft.Colors.BLUE,
        on_click=lambda e: counter.increment(),
    )
    page.floating_action_button_location = ft.FloatingActionButtonLocation.CENTER_FLOAT

    page.add(ft.SafeArea(counter))


ft.run(main)

[FeodorFitsner]

Thanks for the report! The issue body looks empty, so we can’t reproduce yet. Could you share:

Minimal code sample that shows the loading animation (remove unrelated parts)
Exact steps to reproduce (including how you start the app: e.g. flet run --web, flet run, build, etc.)
Expected vs actual behavior (what should be centered, what isn’t)
Screenshot or short screen recording of first vs second refresh
Browser/Device info (Android model, browser name/version)
Any console logs from the mobile browser (or server logs) on the second refresh
Once we have those, we can dig in.

[FeodorFitsner]

Thanks for the report! The issue body looks empty, so we can’t reproduce yet. Could you share:

Minimal code sample that shows the loading animation (remove unrelated parts)
Exact steps to reproduce (including how you start the app: e.g. flet run --web, flet run, build, etc.)
Expected vs actual behavior (what should be centered, what isn’t)
Screenshot or short screen recording of first vs second refresh
Browser/Device info (Android model, browser name/version)
Any console logs from the mobile browser (or server logs) on the second refresh
Once we have those, we can dig in.